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