一、准备工作

首先我们需要到官网下载所需的文件:

官网下载笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本

然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载对应的js和css(因为笔者在VS2012环境下新建的,并且所需的js和css都会对应的放到js和css文件夹下,请读者根据自己的情况修正加载的路径)。

  1. <link href="css/jquery.jqplot.min.css" rel="stylesheet" />
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/jquery.jqplot.min.js"></script>
  4.  
  5. <!--[if lt IE 9]>
  6. <script src="js/excanvas.min.js"></script>
  7. <![endif]-->
  8. <script src="js/jqplot.dateAxisRenderer.min.js"></script>
  9. <script src="js/jqplot.ohlcRenderer.min.js"></script>
  10. <script src="js/jqplot.highlighter.min.js"></script>

其中最后三个js文件在plugins下,今后会经常使用到这个文件夹下的文件,因为他们是很多扩展功能所需的文件。除了引用基本的文件之后我们还需要放置一个占位符用来作为图表的容器,我们需要放置一个宽度为500高度为300的DIV:

  1. <div id="chart" style="width:500px;height:300px;" ></div>

二、正文

今天我们将会介绍一个全新的图表,而且这个图表也比较偏向于行业,它的名字就是阴阳烛图,当然我们首先需要具备一组数据,这样我们才能够使用Jqplot去呈现,下面是我们后面示例中需要用到的数据:

  1. var ohlc = [
  2. ['06/15/2009 16:00:00', 136.01, 139.5, 134.53, 139.48],
  3. ['06/08/2009 16:00:00', 143.82, 144.56, 136.04, 136.97],
  4. ['06/01/2009 16:00:00', 136.47, 146.4, 136, 144.67],
  5. ['05/26/2009 16:00:00', 124.76, 135.9, 124.55, 135.81],
  6. ['05/18/2009 16:00:00', 123.73, 129.31, 121.57, 122.5],
  7. ['05/11/2009 16:00:00', 127.37, 130.96, 119.38, 122.42],
  8. ['05/04/2009 16:00:00', 128.24, 133.5, 126.26, 129.19],
  9. ['04/27/2009 16:00:00', 122.9, 127.95, 122.66, 127.24],
  10. ['04/20/2009 16:00:00', 121.73, 127.2, 118.6, 123.9],
  11. ['04/13/2009 16:00:00', 120.01, 124.25, 115.76, 123.42],
  12. ['04/06/2009 16:00:00', 114.94, 120, 113.28, 119.57],
  13. ['03/30/2009 16:00:00', 104.51, 116.13, 102.61, 115.99],
  14. ['03/23/2009 16:00:00', 102.71, 109.98, 101.75, 106.85],
  15. ['03/16/2009 16:00:00', 96.53, 103.48, 94.18, 101.59],
  16. ['03/09/2009 16:00:00', 84.18, 97.2, 82.57, 95.93],
  17. ['03/02/2009 16:00:00', 88.12, 92.77, 82.33, 85.3],
  18. ['02/23/2009 16:00:00', 91.65, 92.92, 86.51, 89.31],
  19. ['02/17/2009 16:00:00', 96.87, 97.04, 89, 91.2],
  20. ['02/09/2009 16:00:00', 100, 103, 95.77, 99.16],
  21. ['02/02/2009 16:00:00', 89.1, 100, 88.9, 99.72],
  22. ['01/26/2009 16:00:00', 88.86, 95, 88.3, 90.13],
  23. ['01/20/2009 16:00:00', 81.93, 90, 78.2, 88.36],
  24. ['01/12/2009 16:00:00', 90.46, 90.99, 80.05, 82.33],
  25. ['01/05/2009 16:00:00', 93.17, 97.17, 90.04, 90.58],
  26. ['12/29/2008 16:00:00', 86.52, 91.04, 84.72, 90.75],
  27. ['12/22/2008 16:00:00', 90.02, 90.03, 84.55, 85.81],
  28. ['12/15/2008 16:00:00', 95.99, 96.48, 88.02, 90],
  29. ['12/08/2008 16:00:00', 97.28, 103.6, 92.53, 98.27],
  30. ['12/01/2008 16:00:00', 91.3, 96.23, 86.5, 94],
  31. ['11/24/2008 16:00:00', 85.21, 95.25, 84.84, 92.67],
  32. ['11/17/2008 16:00:00', 88.48, 91.58, 79.14, 82.58],
  33. ['11/10/2008 16:00:00', 100.17, 100.4, 86.02, 90.24],
  34. ['11/03/2008 16:00:00', 105.93, 111.79, 95.72, 98.24],
  35. ['10/27/2008 16:00:00', 95.07, 112.19, 91.86, 107.59],
  36. ['10/20/2008 16:00:00', 99.78, 101.25, 90.11, 96.38],
  37. ['10/13/2008 16:00:00', 104.55, 116.4, 85.89, 97.4],
  38. ['10/06/2008 16:00:00', 91.96, 101.5, 85, 96.8],
  39. ['09/29/2008 16:00:00', 119.62, 119.68, 94.65, 97.07],
  40. ['09/22/2008 16:00:00', 139.94, 140.25, 123, 128.24],
  41. ['09/15/2008 16:00:00', 142.03, 147.69, 120.68, 140.91]
  42. ];

有了这组数据之后我们就可以开始完成图表了,既然是新的图表必然我们就需要使用新的引擎,相信学习了几篇的读者一眼就能够发现今天我们需要使用OHLCRenderer引擎,而X轴依然是使用DteAxisRenderer引擎,毕竟是时间。下面我们通过如下的代码来制作图1.1所示的图表:

  1. $.jqplot('chart', [ohlc], {
  2. title: "阴阳烛图",
  3. seriesDefaults:{yaxis:"y2axis"},
  4. axes: {
  5. xaxis: {
  6. renderer: $.jqplot.DateAxisRenderer,
  7. tickOptions: { formatString: "%b %e" },
  8. min: "09-01-2008 16:00",
  9. max: "06-22-2009 16:00",
  10. tickInterval: "5 weeks"
  11. },
  12. y2axis: {
  13. tickOptions: {formatString:"$%d"}
  14. }
  15. },
  16. series: [{ renderer: $.jqplot.OHLCRenderer }],
  17. highlighter: {
  18. show: true,
  19. showMarker: false,
  20. tooltipAxes: "xy",
  21. yvalues: 4,
  22. formatString: '<table class="jqplot-highlighter"> \
  23. <tr><td>date:</td><td>%s</td></tr> \
  24. <tr><td>open:</td><td>%s</td></tr> \
  25. <tr><td>hi:</td><td>%s</td></tr> \
  26. <tr><td>low:</td><td>%s</td></tr> \
  27. <tr><td>close:</td><td>%s</td></tr></table>'
  28. }
  29. });

其中seriesDefaults表示Y轴显示的数据放到右边的Y轴,axes下的xaxis中则通过min和max指定X轴显示的最大日期和最小日期,并且还通过tickInterval指定我们的间隔为6个星期,其中还有一个新的特性就是提示框的格式是可以自定义的,这里我们就通过highlighterformatString指定了,但是光指定还是没用,还要告诉它如何去呈现这个自定义的提示,所以我们还需要借助tooltipAxes指定数据从x轴到y轴来获取并呈现,并且从X轴获取一个数据填充formatString的第一次占位符,而用Y轴中按顺序获取4个值来填充,这个的4是用过yvalues指定的,这样我们就可以自定义提示了。

图1.1

该图中每条竖线都有两个小横杆,他们分别表示开始时的价格,和关闭时的价格,而竖线的两端则表示最低价以及最高价,但是通过这个图我们没法直观的看出开始的价格和关闭时的价格,所以我们还可以指定另一个参数让他们从小横线变成矩形,这样就能够直观的看到图1.2的效果了:

  1. $.jqplot('chart', [ohlc], {
  2. title: "阴阳烛图",
  3. seriesDefaults:{yaxis:"y2axis"},
  4. axes: {
  5. xaxis: {
  6. renderer: $.jqplot.DateAxisRenderer,
  7. tickOptions: { formatString: "%b %e" },
  8. min: "09-01-2008 16:00",
  9. max: "06-22-2009 16:00",
  10. tickInterval: "5 weeks"
  11. },
  12. y2axis: {
  13. tickOptions: {formatString:"$%d"}
  14. }
  15. },
  16. series: [{
  17. renderer: $.jqplot.OHLCRenderer,
  18. rendererOptions: {
  19. candleStick: true
  20. }
  21. }],
  22. highlighter: {
  23. show: true,
  24. showMarker: false,
  25. tooltipAxes: "xy",
  26. yvalues: 4,
  27. formatString: '<table class="jqplot-highlighter"> \
  28. <tr><td>date:</td><td>%s</td></tr> \
  29. <tr><td>open:</td><td>%s</td></tr> \
  30. <tr><td>hi:</td><td>%s</td></tr> \
  31. <tr><td>low:</td><td>%s</td></tr> \
  32. <tr><td>close:</td><td>%s</td></tr></table>'
  33. }
  34. });

这里我们仅仅只是在series中给rendererOptionscandleStick属性设置为了true。

图1.2

jqPlot图表插件学习之阴阳烛图的更多相关文章

  1. jqPlot图表插件学习之饼状图和环状图

    一.准备工作 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载对应的js和css(因为笔者在VS2 ...

  2. jqPlot图表插件学习之数据节点高亮和光标提示

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  3. jqPlot图表插件学习之折线图-散点图-series属性

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  4. jqPlot图表插件学习之柱形图和旋转分类名称

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  5. jqPlot图表插件学习之ajax-json数据加载

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  6. jqPlot图表插件学习之轴说明和label属性

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  7. 图表插件--jqplot交互演示样例

    简单交互 在之前的学习中,我们已经能够绘制各种类型的图表,也能够给图表加入不同的组件,如标题.图例等等.但这些图表仅仅能用于展示数据,一旦希望对图表有所操作--比方查看数据明细--就显得束手无策了.事 ...

  8. 图标插件--jqplot实现柱状图及饼图,表盘图演示样例

    柱状图 在jqPlot图表插件使用说明(一)中,我们已经能够通过jqPlot绘制出比較简单的线形图.通过查看源码.我们也能够看出,线形图是jqPlot默认的图表类型: /** * Class: Ser ...

  9. ECharts图表插件(4.x版本)使用(一、关系图force节点显示为自定义图像/图片,带分类选择)

    导读 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safar ...

随机推荐

  1. Mac环境下配置Tomcat+Eclipse

    下载Tomcat 首先在 Tomcat官方网站 找到自己合适的版本,下载 tar.gz 版本的,下载完成后解压缩到一个目录,进入这个目录下的 bin 执行 startup.sh,如果看到下面的界面,表 ...

  2. Java命令学习系列(五)——jhat

    jhat(Java Heap Analysis Tool),是一个用来分析java的堆情况的命令.之前的文章讲到过,使用jmap可以生成Java堆的Dump文件.生成dump文件之后就可以用jhat命 ...

  3. HipHop PHP & HHVM资料收集

    百度百科 HipHop PHP实战(详解web运行模式) 百度 PHP7和HHVM的性能之争

  4. [转]mysql dual虚拟表

    From : http://thobian.info/?p=1035 虚拟表dual 其实我是今天第一次听说,虽然以前有过它的应用.说不定你也用过哦,看这条sql:select sysdate(); ...

  5. 【转】PHP笔试题2010年

    From : http://www.51projob.com/a/PHP/20120905/602.html 下午,还有一场比较大的面试等着我[虽然接到pps的录用电话,可是心里还是想去verycd试 ...

  6. Spring Data JPA 实现多表关联查询

    本文地址:https://liuyanzhao.com/6978.html 最近抽出时间来做博客,数据库操作使用的是 JPA,相对比 Mybatis 而言,JPA 单表操作非常方便,增删改查都已经写好 ...

  7. String、StringBuffer与StringBuilder之间区别(转)

    原文链接:String.StringBuffer与StringBuilder之间区别 最近学习到StringBuffer,心中有好些疑问,搜索了一些关于String,StringBuffer,Stri ...

  8. Windows8.1 关机异常的解决

    昨天电脑无法正常关机,关机后风扇仍然转,硬盘也在读写,等了很长时间都没有完全关机,只能强制关机.以前其他系统也遇到过这个问题,因此考虑还是驱动问题.回想了下之前装过VirtualBox,考虑到应该是V ...

  9. [转]QT QDateTime类、QTimer类

    QDateTime类,头文件#include <QDateTime> 可以使用QDateTime类来获得系统时间.通过QDateTime::currentDateTime()来获取本地系统 ...

  10. IIS7.5中调试.Net 4.0网站出现无厘头500错误的解决办法 (转)

    刚刚 部署了ii7的dll的有x86写的,就会出现以下这样的问题 iis 7 x86,Could not load file or assembly 'Name' or one of its depe ...