轉自：http://blog.csdn.net/wangyuchun_799/article/details/50292315
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頁面
-
<script src='<?php echo SITE_URL."stock/highstock.js";?>'></script>
-
<script src='<?php echo SITE_URL."stock/exporting.js";?>'></script>
-
-
-
<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>
-
<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('<?php echo $this->createUrl("farmProduceDesc/getKLineGraphData", array('farmProduceId'=>$id)); ?>', function (data) {
-
-
-
var ohlc = [],
-
volume = [],
-
dataLength = data.length,
-
-
groupingUnits = [[
-
'week',
-
[1]
-
], [
-
'month',
-
[1, 2, 3, 4, 6]
-
]],
-
-
i = 0;
-
-
for (i; i < dataLength; i += 1) {
-
ohlc.push([
-
data[i][0],
-
data[i][1],
-
data[i][2],
-
data[i][3],
-
data[i][4]
-
]);
-
-
volume.push([
-
data[i][0],
-
data[i][5]
-
]);
-
}
-
-
-
-
$('#container').highcharts('StockChart', {
-
-
rangeSelector: {
-
selected: 1,
-
buttons: [{
-
-
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:{
-
-
printChart: '打印圖表',
-
-
downloadPNG: '下載JPEG 圖片',
-
-
downloadJPEG: '下載JPEG文檔',
-
-
downloadPDF: '下載PDF 圖片',
-
-
downloadSVG: '下載SVG 矢量圖',
-
-
contextButtonTitle: '下載圖片'
-
-
}
-
,
-
yAxis: [{
-
labels: {
-
align: 'right',
-
x: -3
-
},
-
title: {
-
-
text: '成交價'
-
},
-
height: '60%',
-
lineWidth: 2
-
}, {
-
labels: {
-
align: 'right',
-
x: -3
-
},
-
title: {
-
<span style="white-space:pre"> </span>
text: '成交量'
},
top: '65%', height: '35%', offset: 0, lineWidth: 2
}],
series: [{ type: 'candlestick',
-
<span style="white-space:pre"> </span>
-
name: '<?php echo "{$name}"?>',
-
data: ohlc,
-
dataGrouping: {
-
units: groupingUnits
-
}
-
}
-
, {
-
type: 'column',
-
<pre name="code" class="javascript"><span> </span>
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>
-
<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線圖是否可以正常繪製出來，然後再根據業務填充這個二維數組。
本文參考了以下文章：
http://www.tuicool.com/articles/qAr6ru
http://blog.csdn.net/wan368500/article/details/7722136
