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页面

 

//引入HighStock插件的JS文件，stock为HighStock插件文件夹，放置在工程的根目录，下面有两个JS文件。SITE_URL是我自定义的一个全局变量，指向网站的URL

<script src='<?php echo SITE_URL."stock/highstock.js";?>'></script>
<script src='<?php echo SITE_URL."stock/exporting.js";?>'></script>

//该名称为container的DIV是必须的，HighStock插件在该DIV中绘制K线图
<div id="container" style="height: 400px; min-width: 310px"></div>

<script>
Highcharts.setOptions({

    global: {

    useUTC: false

    },

//语言汉化
    lang:{
<span style="white-space:pre">        </span>//月份全称汉化
    <span style="white-space:pre">    </span>Months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月',  '十月','十一月', '十二月'],
<span style="white-space:pre">        </span>//月份简写汉化，新的HighStock版本中，在K线图中会使用简写的月份，因此要汉化简写的月份，这个不少网上的文章都没有说起
    <span style="white-space:pre">    </span>shortMonths:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月',  '十月','十一月', '十二月'],
<span style="white-space:pre">        </span>//日期汉化
    <span style="white-space:pre">    </span>weekdays:['星期日',  '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
<span style="white-space:pre">    </span>}

});

$(function () {

<span style="white-space:pre">    </span>//调用getJSON方法获取K线图的数据，并加载K线图。注意getJSON是一个Ajax请求，调用控制器动做的URL和传参就不用讲了，后文会讲控制器动做如何写
    $.getJSON('<?php echo $this->createUrl("farmProduceDesc/getKLineGraphData", array('farmProduceId'=>$id)); ?>', function (data) {

        // split the data set into ohlc and volume
        var ohlc = [],
            volume = [],
            dataLength = data.length,
            // set the allowed units for data grouping
            groupingUnits = [[
                'week',                         // unit name
                [1]                             // allowed multiples
            ], [
                'month',
                [1, 2, 3, 4, 6]
            ]],

            i = 0;

        for (i; i < dataLength; i += 1) {
            ohlc.push([
                data[i][0], // the date
                data[i][1], // open
                data[i][2], // high
                data[i][3], // low
                data[i][4] // close
            ]);

            volume.push([
                data[i][0], // the date
                data[i][5] // the volume
            ]);
        }


        // create the chart
        $('#container').highcharts('StockChart', {

            rangeSelector: {
                selected: 1,
                buttons: [{//定义一组buttons,下标从0开始，能够根据你的需求，修改text的内容

                    type: 'week',

                    count: 1,

                    text: '1周'

                    },{

                    type: 'month',

                    count: 1,

                    text: '1月'

                    }, {

                    type: 'month',

                    count: 3,

                    text: '3月'

                    }, {

                    type: 'month',

                    count: 6,

                    text: '6月'

                    }, {

                    type: 'ytd',

                    text: '1季度'

                    }, {

                    type: 'year',

                    count: 1,

                    text: '1年'

                    }, {

                    type: 'all',

                    text: '所有'

                    }],
            },

            title: {
                text: '<?php echo "{$name}历史交易分析"?>'
            },

            lang:{
//对K线图右上角的功能菜单进行汉化
                printChart: '打印图表',

                downloadPNG: '下载JPEG 图片',

                downloadJPEG: '下载JPEG文档',

                downloadPDF: '下载PDF 图片',

                downloadSVG: '下载SVG 矢量图',

                contextButtonTitle: '下载图片'

                }
            ,
            yAxis: [{
                labels: {
                    align: 'right',
                    x: -3
                },
                title: {

//Y轴标题汉化
                    text: '成交价'
                },
                height: '60%',
                lineWidth: 2
            }, {
                labels: {
                    align: 'right',
                    x: -3
                },
                title: {

<span style="white-space:pre">        </span>   //柱状图Y轴标题汉化

text: '成交量' 

},

 

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

 

}], 

series: [{ type: 'candlestick',

<span style="white-space:pre">        </span>//鼠标放在K线图上会弹出信息页面，在这里设置K线图部分的标题
                name: '<?php echo "{$name}"?>',
                data: ohlc,
                dataGrouping: {
                    units: groupingUnits
                }
            }
            , {
                type: 'column',

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

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/>'},

控制器动做

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

public function actionGetKLineGraphData($farmProduceId){
    echo json_encode(array(

<span style="white-space:pre">                </span>//数组中值的顺序是：时间戳(TimeStamp)，开盘价(Open)，最高价(High)，最低价(Low)，收盘价(Close)和交易量(Volume)。顺序千万别<span style="white-space:pre">                </span>  传错了。
<span>                </span>array(1214265600000,24.62,25.11,24.52,24.75,155518461),
<span>                </span>array(1214352000000,24.94,25.55,24.84,25.34,161112469),
<span>                </span>array(1214438400000,24.87,24.98,24.00,24.04,217402080),
<span>                </span>array(1214524800000,23.79,24.37,23.45,24.30,260556205),
<span>                </span>array(1449816339000,24.29,24.57,23.80,23.92,171084536),
<span>        </span>));
    }

注意，动做参数能够自定义，可是返回值必须是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