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

[javascript] view plain copy

print ?

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

[javascript] view plain copy

print ?

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

[javascript] view plain copy

print ?

//语言汉化
lang:{
//月份全称汉化
Months:[\'一月\', \'二月\', \'三月\', \'四月\', \'五月\', \'六月\', \'七月\', \'八月\',\'九月\', \'十月\',\'十一月\', \'十二月\'],
//月份简写汉化，新的HighStock版本中，在K线图中会使用简写的月份，所以要汉化简写的月份，这个很多网上的文章都没有提及
shortMonths:[\'一月\', \'二月\', \'三月\', \'四月\', \'五月\', \'六月\', \'七月\', \'八月\',\'九月\', \'十月\',\'十一月\', \'十二月\'],
//日期汉化
weekdays:[\'星期日\', \'星期一\', \'星期二\', \'星期三\', \'星期四\', \'星期五\', \'星期六\']
}
});
$(function () {

[javascript] view plain copy

print ?

//调用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: {

[javascript] view plain copy

print ?

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

[javascript] view plain copy

print ?

//柱状图Y轴标题汉化

text: \'成交量\'

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

}],

series: [{ type: \'candlestick\',

[javascript] view plain copy

print ?

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

[javascript] view plain copy

print ?

<pre name="code" class="javascript"> //鼠标放在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} \'},

控制器动作

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

[php] view plain copy

print ?

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

[php] view plain copy

print ?

//数组中值的顺序是：时间戳(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线图是否可以正常绘制出来，然后再根据业务填充这个二维数组。

本人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

秒客网

PHP使用HighChart生成股票K线图详解

本人qq群也有许多的技术文档，希望可以为你提供一些帮助(非技术的勿加)。

HighStock组成

HighStock使用步骤

web页面

控制器动作

本人qq群也有许多的技术文档，希望可以为你提供一些帮助(非技术的勿加)。

相关文章