股票图绘制 php,PHP使用HighChart生成股票K線圖詳解

轉自：http://blog.csdn.net/wangyuchun_799/article/details/50292315

HighChart是集合了各種常見的web圖表的開源合集，其中產生股票K線圖的部分叫做“HighStock”。大家如果需要可以到我的資源頁下載，是最新版：

當然，大家也可以去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

//該名稱為container的DIV是必須的，HighStock插件在該DIV中繪制K線圖

Highcharts.setOptions({

global: {

useUTC: false

},

//語言漢化

lang:{

        //月份全稱漢化

    Months:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],

        //月份簡寫漢化，新的HighStock版本中，在K線圖中會使用簡寫的月份，所以要漢化簡寫的月份，這個很多網上的文章都沒有提及

    shortMonths:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],

        //日期漢化

    weekdays:['星期日','星期一','星期二','星期三','星期四','星期五','星期六']

    }

});

$(function() {

    //調用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

varohlc = [],

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 

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: {

        //柱狀圖Y軸標題漢化

text: '成交量'

},

top: '65%',

height: '35%',

offset: 0,

lineWidth: 2

}],

series: [{ type: 'candlestick',

        //鼠標放在K線圖上會彈出信息頁面，在這里設置K線圖部分的標題

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

data: ohlc,

dataGrouping: {

units: groupingUnits

}

}

, {

type: 'column',

      //鼠標放在K線圖上會彈出信息頁面，在這里設置柱狀圖部分的標題

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

如何漢化彈出層中標簽的文字呢，

在highstock.js文件中找到如下部分，將原文中的open high low close改成開盤價、最高價、最低價和收盤價即可。

tooltip:{pointFormat:'\u25cf {series.name}
開盤價: {point.open}
最高價: {point.high}
最低價: {point.low}
收盤價: {point.close}
'},

控制器動作

上面講完了如何部署插件，如何顯示插件以及如何漢化，如何請求等，接下來我們就講一下，如何編寫控制器動作。

publicfunctionactionGetKLineGraphData($farmProduceId){

echojson_encode(array(                //數組中值的順序是：時間戳(TimeStamp)，開盤價(Open)，最高價(High)，最低價(Low)，收盤價(Close)和交易量(Volume)。順序千萬別                  傳錯了。

                array(1214265600000,24.62,25.11,24.52,24.75,155518461),

                array(1214352000000,24.94,25.55,24.84,25.34,161112469),

                array(1214438400000,24.87,24.98,24.00,24.04,217402080),

                array(1214524800000,23.79,24.37,23.45,24.30,260556205),

                array(1449816339000,24.29,24.57,23.80,23.92,171084536),

        ));

}

注意，動作參數可以自定義，但是返回值必須是JSON格式的二維數組。由於是Ajax的請求，所以返回值要用echo，不能使用return。

所以，你要做的，就是根據你的實際業務，先生成一個二維數組，然后再用json_encode編碼成JSON格式，通過echo返回出去。我這里給了一個示例數據，可以先使用上面的示例數據測試K線圖是否可以正常繪制出來，然后再根據業務填充這個二維數組。

本文參考了以下文章：

http://www.tuicool.com/articles/qAr6ru

http://blog.csdn.net/wan368500/article/details/7722136