zoukankan      html  css  js  c++  java

  • PHP使用HighChart生成股票K线图详解

    本人qq群也有许多的技术文档，希望可以为你提供一些帮助(非技术的勿加)。

    QQ群：   281442983 (点击链接加入群：http://jq.qq.com/?_wv=1027&k=29LoD19)    QQ：1542385235

    HighChart是集合了各种常见的web图表的开源合集，其中产生股票K线图的部分叫做“HighStock”。大家如果需要可以到我的资源页下载，是最新版：

    http://download.csdn.net/detail/wangyuchun_799/9353525

    当然，大家也可以去HighChart官网下载。但是由于不同版本对参数的设置方式不同，所以，还是建议阅读本文的读者在我的资源页下载，确保可以在工程中一次性运行成功。我也是在各种版本中，碰了好多问题，才写了这篇文章供大家参考的。

    首先介绍一下，我的PHP环境：XAMPP+Yii。了解Yii框架的朋友们应该对Yii的扩展（extensions）很熟悉，但是我真心对Yii的扩展没有任何的好感，因为应用起来门槛高，问题多，太费劲了。当然，处于安全性等各方面考虑，yii扩展也有它的优势。对于我们常用的JS插件，在Yii 中基本上都有相应的封装版本。但是，相关文档和资料实在太少了，应用起来太麻烦。本文讲解，如何使用原生的HighStock生成股票K线图。

    HighStock组成

    HighStock从上到下主要有缩放比例、日期选择、功能菜单、K线图、柱形图、日期缩放比例等几个主要部分组成，由于界面都是英文的，所以，除了需要将数据正确绘制上去外，还需要对HighStock插件展示出来的英文文字汉化成中文。

    股票的K线图具体含义我们不用明白，只需要记住HighStock插件，我们只需要传入6个值就可以了，依次是：时间戳，开盘价，最高价，最低价，收盘价和交易量。

    HighStock使用步骤

    正确使用HighStock需要如下几个步骤：

    （1）下载原生HighChart插件，单独下载HighStock部分也行。或者从我的资源页中下载（推荐）

    （2）将HighStock下载解压后，拷贝到项目工程的根目录下。拷贝在其他目录下也是可以的，这个无所谓，只要能访问的就可以

    （3）在web页面引入HighStock的JS文件，调用HighStock函数生成K线图

    （4）在控制器中创建相应的方法生成要在K线图中展示的数据

    （5）汉化

    web页面

    [javascript] view plain copy
     
     print?
    1. //引入HighStock插件的JS文件，stock为HighStock插件文件夹，放置在工程的根目录，下面有两个JS文件。SITE_URL是我自定义的一个全局变量，指向网站的URL  
    [javascript] view plain copy
     
     print?
    1. <script src='<?php echo SITE_URL."stock/highstock.js";?>'></script>  
    2. <script src='<?php echo SITE_URL."stock/exporting.js";?>'></script>  
    3.   
    4. //该名称为container的DIV是必须的，HighStock插件在该DIV中绘制K线图  
    5. <div id="container" style="height: 400px; min- 310px"></div>  
    6.   
    7. <script>  
    8. Highcharts.setOptions({  
    9.   
    10.     global: {  
    11.   
    12.     useUTC: false  
    13.   
    14.     },  
    [javascript] view plain copy
     
     print?
    1. //语言汉化  
    2.     lang:{  
    3. <span style="white-space:pre">        </span>//月份全称汉化  
    4.     <span style="white-space:pre">    </span>Months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月',  '十月','十一月', '十二月'],  
    5. <span style="white-space:pre">        </span>//月份简写汉化，新的HighStock版本中，在K线图中会使用简写的月份，所以要汉化简写的月份，这个很多网上的文章都没有提及  
    6.     <span style="white-space:pre">    </span>shortMonths:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月',  '十月','十一月', '十二月'],  
    7. <span style="white-space:pre">        </span>//日期汉化  
    8.     <span style="white-space:pre">    </span>weekdays:['星期日',  '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']  
    9. <span style="white-space:pre">    </span>}  
    10.   
    11. });  
    12.       
    13. $(function () {  
    [javascript] view plain copy
     
     print?
    1. <span style="white-space:pre">    </span>//调用getJSON方法获取K线图的数据，并加载K线图。注意getJSON是一个Ajax请求，调用控制器动作的URL和传参就不用讲了，后文会讲控制器动作如何写  
    2.     $.getJSON('<?php echo $this->createUrl("farmProduceDesc/getKLineGraphData", array('farmProduceId'=>$id)); ?>', function (data) {  
    3.   
    4.         // split the data set into ohlc and volume  
    5.         var ohlc = [],  
    6.             volume = [],  
    7.             dataLength = data.length,  
    8.             // set the allowed units for data grouping  
    9.             groupingUnits = [[  
    10.                 'week',                         // unit name  
    11.                 [1]                             // allowed multiples  
    12.             ], [  
    13.                 'month',  
    14.                 [1, 2, 3, 4, 6]  
    15.             ]],  
    16.   
    17.             i = 0;  
    18.   
    19.         for (i; i < dataLength; i += 1) {  
    20.             ohlc.push([  
    21.                 data[i][0], // the date  
    22.                 data[i][1], // open  
    23.                 data[i][2], // high  
    24.                 data[i][3], // low  
    25.                 data[i][4] // close  
    26.             ]);  
    27.   
    28.             volume.push([  
    29.                 data[i][0], // the date  
    30.                 data[i][5] // the volume  
    31.             ]);  
    32.         }  
    33.   
    34.   
    35.         // create the chart  
    36.         $('#container').highcharts('StockChart', {  
    37.   
    38.             rangeSelector: {  
    39.                 selected: 1,  
    40.                 buttons: [{//定义一组buttons,下标从0开始，可以根据你的需求，修改text的内容  
    41.   
    42.                     type: 'week',  
    43.   
    44.                     count: 1,  
    45.   
    46.                     text: '1周'  
    47.   
    48.                     },{  
    49.   
    50.                     type: 'month',  
    51.   
    52.                     count: 1,  
    53.   
    54.                     text: '1月'  
    55.   
    56.                     }, {  
    57.   
    58.                     type: 'month',  
    59.   
    60.                     count: 3,  
    61.   
    62.                     text: '3月'  
    63.   
    64.                     }, {  
    65.   
    66.                     type: 'month',  
    67.   
    68.                     count: 6,  
    69.   
    70.                     text: '6月'  
    71.   
    72.                     }, {  
    73.   
    74.                     type: 'ytd',  
    75.   
    76.                     text: '1季度'  
    77.   
    78.                     }, {  
    79.   
    80.                     type: 'year',  
    81.   
    82.                     count: 1,  
    83.   
    84.                     text: '1年'  
    85.   
    86.                     }, {  
    87.   
    88.                     type: 'all',  
    89.   
    90.                     text: '全部'  
    91.   
    92.                     }],  
    93.             },  
    94.   
    95.             title: {  
    96.                 text: '<?php echo "{$name}历史交易分析"?>'  
    97.             },  
    98.   
    99.             lang:{  
    100. //对K线图右上角的功能菜单进行汉化  
    101.                 printChart: '打印图表',  
    102.   
    103.                 downloadPNG: '下载JPEG 图片',  
    104.   
    105.                 downloadJPEG: '下载JPEG文档',  
    106.   
    107.                 downloadPDF: '下载PDF 图片',  
    108.   
    109.                 downloadSVG: '下载SVG 矢量图',  
    110.   
    111.                 contextButtonTitle: '下载图片'  
    112.   
    113.                 }  
    114.             ,  
    115.             yAxis: [{  
    116.                 labels: {  
    117.                     align: 'right',  
    118.                     x: -3  
    119.                 },  
    120.                 title: {  
    [javascript] view plain copy
     
     print?
    1. //Y轴标题汉化  
    2.                     text: '成交价'  
    3.                 },  
    4.                 height: '60%',  
    5.                 lineWidth: 2  
    6.             }, {  
    7.                 labels: {  
    8.                     align: 'right',  
    9.                     x: -3  
    10.                 },  
    11.                 title: {  
    [javascript] view plain copy
     
     print?
    1. <span style="white-space:pre">        </span>   //柱状图Y轴标题汉化  

    text: '成交量' 

    },

    top: '65%',
                    height: '35%',
                    offset: 0,
                    lineWidth: 2

    }], 

    series: [{ type: 'candlestick',

    

    

    

    [javascript] view plain copy

     
    
 print?
    

    

      

    1. <span style="white-space:pre">        </span>//鼠标放在K线图上会弹出信息页面，在这里设置K线图部分的标题  
      2. 

    2.                 name: '<?php echo "{$name}"?>',  
      3. 

    3.                 data: ohlc,  
      4. 

    4.                 dataGrouping: {  
      5. 

    5.                     units: groupingUnits  
      6. 

    6.                 }  
      7. 

    7.             }  
      8. 

    8.             , {  
      9. 

    9.                 type: 'column',  
      10. 

    

    

    

    [javascript] view plain copy

     
    
 print?
    

    

      

    1. <pre name="code" class="javascript"><span>      </span>//鼠标放在K线图上会弹出信息页面，在这里设置柱状图部分的标题  
      2. 

    

    name: '交易量', data: volume, yAxis: 1, dataGrouping: { units: groupingUnits } } ] }); });});
    

    


    如何汉化弹出层中标签的文字呢，
    

    在highstock.js文件中找到如下部分，将原文中的open high low close改成开盘价、最高价、最低价和收盘价即可。
    

    tooltip:{pointFormat:'<span style="color:{point.color}">u25cf</span> <b> {series.name}</b><br/>开盘价: {point.open}<br/>最高价: {point.high}<br/>最低价: {point.low} <br/>收盘价: {point.close}<br/>'},
    

    控制器动作
    

    上面讲完了如何部署插件，如何显示插件以及如何汉化，如何请求等，接下来我们就讲一下，如何编写控制器动作。
    

    

    

    

    [php] view plain copy

     
    
 print?
    

    

      

    1. public function actionGetKLineGraphData($farmProduceId){  
      2. 

    2.     echo json_encode(array(  
      3. 

    

    

    

    [php] view plain copy

     
    
 print?
    

    

      

    1. <span style="white-space:pre">                </span>//数组中值的顺序是：时间戳(TimeStamp)，开盘价(Open)，最高价(High)，最低价(Low)，收盘价(Close)和交易量(Volume)。顺序千万别<span style="white-space:pre">                </span>  传错了。  
      2. 

    2. <span>                </span>array(1214265600000,24.62,25.11,24.52,24.75,155518461),  
      3. 

    3. <span>                </span>array(1214352000000,24.94,25.55,24.84,25.34,161112469),  
      4. 

    4. <span>                </span>array(1214438400000,24.87,24.98,24.00,24.04,217402080),  
      5. 

    5. <span>                </span>array(1214524800000,23.79,24.37,23.45,24.30,260556205),  
      6. 

    6. <span>                </span>array(1449816339000,24.29,24.57,23.80,23.92,171084536),  
      7. 

    7. <span>        </span>));  
      8. 

    8.     }  
      9. 

    

    

    注意，动作参数可以自定义，但是返回值必须是JSON格式的二维数组。由于是Ajax的请求，所以返回值要用echo，不能使用return。
    

    所以，你要做的，就是根据你的实际业务，先生成一个二维数组，然后再用json_encode编码成JSON格式，通过echo返回出去。我这里给了一个示例数据，可以先使用上面的示例数据测试K线图是否可以正常绘制出来，然后再根据业务填充这个二维数组。
    

     
    

    

    本人qq群也有许多的技术文档，希望可以为你提供一些帮助(非技术的勿加)。
    

    QQ群：   281442983 (点击链接加入群：http://jq.qq.com/?_wv=1027&k=29LoD19)    
    


    我的淘宝店，可以进去逛逛噢：https://shop108912636.taobao.com/index.htm?spm=2013.1.w5001-7867000954.3.1d29318dPlLar7&scene=taobao_shop
    



    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  关于今后的进展 
                    
    很久没来了 
                    
    达到极限了 
                    
    寒假进度4Scala环境配置 
                    
    寒假进度3Jupyter运行PyTorch 
                    
    寒假进度2Pycharm运行PyTorch 
                    
    寒假进度7Python与Jupyter使用对比 
                    
    寒假进度6音频多人声分离赛题分析 
                    
    《Google的软件测试之道》（5） 
                    
    《Google的软件测试之道》（6） 
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/piwefei/p/5360351.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看