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>));
- }
本人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线图详解的更多相关文章
- Highstock生成股票K线图
在线演示 本地下载 使用HightStock生成股票K线图例子.
- 利用JFreeChart绘制股票K线图完整解决方案
http://blog.sina.com.cn/s/blog_4ad042e50100q7d9.html 利用JFreeChart绘制股票K线图完整解决方案 (2011-04-30 13:27:17) ...
- 股票K线图-JfreeChart版
http://blog.csdn.net/ami121/article/details/3953272 股票K线图-JfreeChart版 标签: jfreechartpropertiesapplet ...
- IOS 股票K线图、分时图
IOS 股票K线图.分时图,网上开源项目很少,质量也是参差不齐:偶尔搜索到看似有希望的文章,点进去,还是个标题党:深受毒害.经过一段时间的探索,终于在开源基础上完成了自己的股票K线图.分时图: 先放出 ...
- 基于Echarts的股票K线图展示
发布时间:2018-10-31 技术:javascript+html5+canvas 概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...
- WPF中使用amCharts绘制股票K线图
原文:WPF中使用amCharts绘制股票K线图 本想自己用GDI绘图, 通过数据直接绘制一张蜡柱图, 但觉得这样子的功能比较少, 所以到网上搜索一些能画出K线图的控件. 发现DynamicDataD ...
- python pandas 画图、显示中文、股票K线图
目录: 1.pandas官方画图链接 2.标记图中数据点 3.画图显示中文 4.画股票K线图 5.matplotlib基本用法 6.format输出 6.format输出例子 eps_range=[0 ...
- C#下如何用NPlot绘制期货股票K线图(3):设计要显示的股票价格图表窗口并定义相应类的成员及函数
[内容简介] 上一篇介绍了要显示K线图所需要的数据结构,及要动态显示K线图,需要动态读取数据文件必需的几个功能函数.本篇介绍要显示蜡烛图所用到的窗口界面设计及对应类定义.下面分述如下: [窗口界面] ...
- C#下如何用NPlot绘制期货股票K线图(2):读取数据文件让K线图自动更新
[内容介绍]上一篇介绍了K线图的基本绘制方法,但很不完善,本篇增加了它直接读取数据的功能,这对于金融市场的数据量大且又需要动态刷新功能的实现很重要. [实现方法] 1.需要一个数据文件,这里用的是直接 ...
随机推荐
- bind标签_databaseId标签,_parameter标签的使用
1.在接口写方法 public List<Employee> getEmpsTestInnerParameter(Employee employee); 2在映射文件中进行配置 <s ...
- saml2协议sp-initial登录过程
登录过程如下所示: 一次完整的saml认证过程,包括一次samlrequest和samlresponse, 首先用户如果想访问一个sp,sp会先检验用户是否登录,如果用户已经登录,即可以正常访问sp的 ...
- Vue知识整理16:单文件组件
过程较为复杂,这里直接写出视频地址,可以直接查看 https://learning.dcloud.io/#/?vid=14
- WPF DevExpress Chart控件 界面绑定数据源,不通过C#代码进行绑定
<Grid x:Name="myGrid" Loaded="Grid_Loaded" DataContext="{Binding PartOne ...
- webpack bundle中parentJsonpFunction的作用
parentJsonpFunction作用:使异步加载的模块在多个不同的bundle内同步. 假设有多入口文件 bundle1.js: bundl2.js: 在webpack打包后 加载流程: 1.b ...
- IntlliJ IDEA 注册码获取或离线破解
JB 的软件还是挺好用的,建议有钱的话支持正版.. IntelliJ IDEA 有开源版,但是要想玩企业级开发,还是得用收费版. 不管哪种方式,使用前都需要把"0.0.0.0 account ...
- Ubuntu16.04 国内源 source 注意事项
注意对应关系 Ubuntu16.04 为 xenial 如果贴错了 在你执行 sudo apt-get upgrade 的时候很麻烦.很慢会更新到 另外版本系统中. 被坑过…… 阿里云源 deb ht ...
- 【Qt开发】解决Qt程序在Linux下无法输入中文的办法
解决Qt程序在Linux下无法输入中文的办法 一位网友问我如何在Linux的Qt的应用程序中输入中文,我一开始觉得不是什么问题,但是后面自己尝试了一下还真不行.不仅是Qt制作的应用程序,就连Qt Cr ...
- librdkafka 安装
1,Git clone git clone https://github.com/edenhill/librdkafka.git 2,cd librdkafka/ 3,./configure 4,ma ...
- c++ 加载库错误问题解决
转载自:http://blog.csdn.net/sahusoft/article/details/7388617 一般我们在Linux下执行某些外部程序的时候可能会提示找不到共享库的错误, 比如: ...