本人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. bind标签_databaseId标签,_parameter标签的使用

    1.在接口写方法 public List<Employee> getEmpsTestInnerParameter(Employee employee); 2在映射文件中进行配置 <s ...

  2. saml2协议sp-initial登录过程

    登录过程如下所示: 一次完整的saml认证过程,包括一次samlrequest和samlresponse, 首先用户如果想访问一个sp,sp会先检验用户是否登录,如果用户已经登录,即可以正常访问sp的 ...

  3. Vue知识整理16:单文件组件

    过程较为复杂,这里直接写出视频地址,可以直接查看 https://learning.dcloud.io/#/?vid=14

  4. WPF DevExpress Chart控件 界面绑定数据源,不通过C#代码进行绑定

    <Grid x:Name="myGrid" Loaded="Grid_Loaded" DataContext="{Binding PartOne ...

  5. webpack bundle中parentJsonpFunction的作用

    parentJsonpFunction作用:使异步加载的模块在多个不同的bundle内同步. 假设有多入口文件 bundle1.js: bundl2.js: 在webpack打包后 加载流程: 1.b ...

  6. IntlliJ IDEA 注册码获取或离线破解

    JB 的软件还是挺好用的,建议有钱的话支持正版.. IntelliJ IDEA 有开源版,但是要想玩企业级开发,还是得用收费版. 不管哪种方式,使用前都需要把"0.0.0.0 account ...

  7. Ubuntu16.04 国内源 source 注意事项

    注意对应关系 Ubuntu16.04 为 xenial 如果贴错了 在你执行 sudo apt-get upgrade 的时候很麻烦.很慢会更新到 另外版本系统中. 被坑过…… 阿里云源 deb ht ...

  8. 【Qt开发】解决Qt程序在Linux下无法输入中文的办法

    解决Qt程序在Linux下无法输入中文的办法 一位网友问我如何在Linux的Qt的应用程序中输入中文,我一开始觉得不是什么问题,但是后面自己尝试了一下还真不行.不仅是Qt制作的应用程序,就连Qt Cr ...

  9. librdkafka 安装

    1,Git clone git clone https://github.com/edenhill/librdkafka.git 2,cd librdkafka/ 3,./configure 4,ma ...

  10. c++ 加载库错误问题解决

    转载自:http://blog.csdn.net/sahusoft/article/details/7388617 一般我们在Linux下执行某些外部程序的时候可能会提示找不到共享库的错误, 比如: ...