HighChart是集合了各种常见的web图表的开源合集,其中产生股票K线图的部分叫做“HighStock”。大家如果需要可以到我的资源页下载,是最新版:
http://download.csdn/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线图是否可以正常绘制出来,然后再根据业务填充这个二维数组。
本文参考了以下文章: http://www.tuicool/articles/qAr6ru
http://blog.csdn/wan368500/article/details/7722136
更多推荐
PHP使用HighChart生成股票K线图详解
发布评论