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

  1. //引入HighStock插件的JS文件,stock为HighStock插件文件夹,放置在工程的根目录,下面有两个JS文件。SITE_URL是我自定义的一个全局变量,指向网站的URL
  1. <script src='<?php echo SITE_URL."stock/highstock.js";?>'></script>
  2. <script src='<?php echo SITE_URL."stock/exporting.js";?>'></script>
  3. //该名称为container的DIV是必须的,HighStock插件在该DIV中绘制K线图
  4. <div id="container" style="height: 400px; min-width: 310px"></div>
  5. <script>
  6. Highcharts.setOptions({
  7. global: {
  8. useUTC: false
  9. },
  1. //语言汉化
  2. lang:{
  3. <span style="white-space:pre">        </span>//月份全称汉化
  4. <span style="white-space:pre">    </span>Months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月',  '十月','十一月', '十二月'],
  5. <span style="white-space:pre">        </span>//月份简写汉化,新的HighStock版本中,在K线图中会使用简写的月份,所以要汉化简写的月份,这个很多网上的文章都没有提及
  6. <span style="white-space:pre">    </span>shortMonths:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月',  '十月','十一月', '十二月'],
  7. <span style="white-space:pre">        </span>//日期汉化
  8. <span style="white-space:pre">    </span>weekdays:['星期日',  '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  9. <span style="white-space:pre">    </span>}
  10. });
  11. $(function () {
  1. <span style="white-space:pre">    </span>//调用getJSON方法获取K线图的数据,并加载K线图。注意getJSON是一个Ajax请求,调用控制器动作的URL和传参就不用讲了,后文会讲控制器动作如何写
  2. $.getJSON('<?php echo $this->createUrl("farmProduceDesc/getKLineGraphData", array('farmProduceId'=>$id)); ?>', function (data) {
  3. // split the data set into ohlc and volume
  4. var ohlc = [],
  5. volume = [],
  6. dataLength = data.length,
  7. // set the allowed units for data grouping
  8. groupingUnits = [[
  9. 'week',                         // unit name
  10. [1]                             // allowed multiples
  11. ], [
  12. 'month',
  13. [1, 2, 3, 4, 6]
  14. ]],
  15. i = 0;
  16. for (i; i < dataLength; i += 1) {
  17. ohlc.push([
  18. data[i][0], // the date
  19. data[i][1], // open
  20. data[i][2], // high
  21. data[i][3], // low
  22. data[i][4] // close
  23. ]);
  24. volume.push([
  25. data[i][0], // the date
  26. data[i][5] // the volume
  27. ]);
  28. }
  29. // create the chart
  30. $('#container').highcharts('StockChart', {
  31. rangeSelector: {
  32. selected: 1,
  33. buttons: [{//定义一组buttons,下标从0开始,可以根据你的需求,修改text的内容
  34. type: 'week',
  35. count: 1,
  36. text: '1周'
  37. },{
  38. type: 'month',
  39. count: 1,
  40. text: '1月'
  41. }, {
  42. type: 'month',
  43. count: 3,
  44. text: '3月'
  45. }, {
  46. type: 'month',
  47. count: 6,
  48. text: '6月'
  49. }, {
  50. type: 'ytd',
  51. text: '1季度'
  52. }, {
  53. type: 'year',
  54. count: 1,
  55. text: '1年'
  56. }, {
  57. type: 'all',
  58. text: '全部'
  59. }],
  60. },
  61. title: {
  62. text: '<?php echo "{$name}历史交易分析"?>'
  63. },
  64. lang:{
  65. //对K线图右上角的功能菜单进行汉化
  66. printChart: '打印图表',
  67. downloadPNG: '下载JPEG 图片',
  68. downloadJPEG: '下载JPEG文档',
  69. downloadPDF: '下载PDF 图片',
  70. downloadSVG: '下载SVG 矢量图',
  71. contextButtonTitle: '下载图片'
  72. }
  73. ,
  74. yAxis: [{
  75. labels: {
  76. align: 'right',
  77. x: -3
  78. },
  79. title: {
  1. //Y轴标题汉化
  2. text: '成交价'
  3. },
  4. height: '60%',
  5. lineWidth: 2
  6. }, {
  7. labels: {
  8. align: 'right',
  9. x: -3
  10. },
  11. title: {
  1. <span style="white-space:pre">        </span>   //柱状图Y轴标题汉化

text: '成交量'

},

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

}],

series: [{ type: 'candlestick',


  1. <span style="white-space:pre">        </span>//鼠标放在K线图上会弹出信息页面,在这里设置K线图部分的标题
  2. name: '<?php echo "{$name}"?>',
  3. data: ohlc,
  4. dataGrouping: {
  5. units: groupingUnits
  6. }
  7. }
  8. , {
  9. type: 'column',
  1. <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/>'},

控制器动作

上面讲完了如何部署插件,如何显示插件以及如何汉化,如何请求等,接下来我们就讲一下,如何编写控制器动作。
  1. public function actionGetKLineGraphData($farmProduceId){
  2. echo json_encode(array(
  1. <span style="white-space:pre">                </span>//数组中值的顺序是:时间戳(TimeStamp),开盘价(Open),最高价(High),最低价(Low),收盘价(Close)和交易量(Volume)。顺序千万别<span style="white-space:pre">                </span>  传错了。
  2. <span>                </span>array(1214265600000,24.62,25.11,24.52,24.75,155518461),
  3. <span>                </span>array(1214352000000,24.94,25.55,24.84,25.34,161112469),
  4. <span>                </span>array(1214438400000,24.87,24.98,24.00,24.04,217402080),
  5. <span>                </span>array(1214524800000,23.79,24.37,23.45,24.30,260556205),
  6. <span>                </span>array(1449816339000,24.29,24.57,23.80,23.92,171084536),
  7. <span>        </span>));
  8. }
注意,动作参数可以自定义,但是返回值必须是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线图详解的更多相关文章

  1. Highstock生成股票K线图

    在线演示 本地下载 使用HightStock生成股票K线图例子.

  2. 利用JFreeChart绘制股票K线图完整解决方案

    http://blog.sina.com.cn/s/blog_4ad042e50100q7d9.html 利用JFreeChart绘制股票K线图完整解决方案 (2011-04-30 13:27:17) ...

  3. 股票K线图-JfreeChart版

    http://blog.csdn.net/ami121/article/details/3953272 股票K线图-JfreeChart版 标签: jfreechartpropertiesapplet ...

  4. IOS 股票K线图、分时图

    IOS 股票K线图.分时图,网上开源项目很少,质量也是参差不齐:偶尔搜索到看似有希望的文章,点进去,还是个标题党:深受毒害.经过一段时间的探索,终于在开源基础上完成了自己的股票K线图.分时图: 先放出 ...

  5. 基于Echarts的股票K线图展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...

  6. WPF中使用amCharts绘制股票K线图

    原文:WPF中使用amCharts绘制股票K线图 本想自己用GDI绘图, 通过数据直接绘制一张蜡柱图, 但觉得这样子的功能比较少, 所以到网上搜索一些能画出K线图的控件. 发现DynamicDataD ...

  7. python pandas 画图、显示中文、股票K线图

    目录: 1.pandas官方画图链接 2.标记图中数据点 3.画图显示中文 4.画股票K线图 5.matplotlib基本用法 6.format输出 6.format输出例子 eps_range=[0 ...

  8. C#下如何用NPlot绘制期货股票K线图(3):设计要显示的股票价格图表窗口并定义相应类的成员及函数

    [内容简介] 上一篇介绍了要显示K线图所需要的数据结构,及要动态显示K线图,需要动态读取数据文件必需的几个功能函数.本篇介绍要显示蜡烛图所用到的窗口界面设计及对应类定义.下面分述如下: [窗口界面] ...

  9. C#下如何用NPlot绘制期货股票K线图(2):读取数据文件让K线图自动更新

    [内容介绍]上一篇介绍了K线图的基本绘制方法,但很不完善,本篇增加了它直接读取数据的功能,这对于金融市场的数据量大且又需要动态刷新功能的实现很重要. [实现方法] 1.需要一个数据文件,这里用的是直接 ...

随机推荐

  1. WPF 自定义按钮 Style

    <Style TargetType="{x:Type Button}" x:Key="DefaultButton"> <Setter Prop ...

  2. CAN诊断学习

    汽车CAN总线有动力总成PCAN,底盘控制CCAN,整车控制BCAN,娱乐ECAN,诊断DCAN五种. CAN诊断,即是对CAN网络中各节点,各CAN总线,网关的故障进行检查与修复. 统一诊断服务(U ...

  3. leetcode 342. 4的幂(python)

    1. 题目描述 给定一个整数 (32 位有符号整数),请编写一个函数来判断它是否是 4 的幂次方. 示例 1: 输入: 16输出: true示例 2: 输入: 5输出: false 2. 思路 参考: ...

  4. Octavia 创建 Listener、Pool、Member、L7policy、L7 rule 与 Health Manager 的实现与分析

    目录 文章目录 目录 创建 Listener 创建 Pool 创建 Member CalculateDelta HandleNetworkDeltas AmphoraePostNetworkPlug ...

  5. 阶段3 1.Mybatis_11.Mybatis的缓存_8 mybatis的二级缓存

    二级缓存:             它指的是Mybatis中SqlSessionFactory对象的缓存.由同一个SqlSessionFactory对象创建的SqlSession共享其缓存.      ...

  6. IDEA maven 阿里云镜像 下载jar失败

    我在使用IDEA搭建SpringCloud项目的时候,发现很多spring cloud 包总是下载不了.maven配置了阿里云镜像.在换了一下新版的镜像地址以后就可以下包了. 官方答疑:新版maven ...

  7. virtualbox压缩虚拟机硬盘文件vhd

    命令如下: VBoxManage modifyhd D:\pc1\pc1.vhd  --compact 当提示以下内容时,将整个虚拟机文件夹拷贝盘符根目录下,将[D:\pc1\pc1.vhd]改为相应 ...

  8. 应用安全 - Web框架 - Apache Solr - 漏洞汇总

    CVE-2019-12409 Date: // 类型: 配置不当导致远程代码执行 前置条件: 影响范围: Solr and for Linux Solr下载:https://www.apache.or ...

  9. 【Linux开发】./configure,make,make install的作用

    这些都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤. ./configure是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不是需要CC或GCC ...

  10. django中的一对一的关系

    在django中一对一的关系其实就是在后面加上了unique=True 唯一的操作 源码就是这样的 其余的操作跟多对一的操作一样