这篇文章适合对highcharts已经有一定了解的猿友。
  前两天想用highcharts做一个时间图,但是时间轴(x轴)的时间坐标并不是等间隔的,之前一直采用的方法是把时间做成等间隔的,然后没有数据的时间点数据填充为null.这种策略显然不好,LZ想从根本上解决这一问题,让highcharts自己对时间进行处理,思路当然就是借助highcharts本身的机制.(版本:Highcharts-4.2.6)。

  翻看highcharts api,xAxis部分的type属性可取值有datetime,点击查看 datetime with irregular intervals例子:

  

  LZ按照这个例子整理了一个基于本地时间的散点图:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
  5. <script src="https://code.highcharts.com/highcharts.js"></script>
  6. <script type="text/javascript">
  7. //数据
  8. //1.数据格式是这样的,一个时间和一个数据点放在一起。
  9. //另外,时间以时间戳的形式展示,实际开发中时间往往是以yyyy-MM-dd hh:mi:ss格式存在数据库中,
  10. //以java为例:从数据库拿到java.util.Date后,直接调用getTime()方法即可。
  11. var data = [[1478050088000,856],
  12. [1478050364000,781],
  13. [1478050786000,744],
  14. [1478050864000,732],
  15. [1478050775000,775],
  16. [1478050297000,785]];
  17.  
  18. $(function () {
  19. drawChart();
  20. });
  21.  
  22. function drawChart(){
  23. //2.highcharts默认使用utc时间格式,关闭utc,使用本地时间
  24. Highcharts.setOptions({
  25. global: {
  26. useUTC: false
  27. }
  28. });
  29. var chartPic = new Highcharts.Chart({
  30. colors: ["#01D26D"],
  31. chart: {
  32. renderTo: 'content',
  33. type: 'scatter',
  34. zoomType: 'xy',
  35. },
  36. title: {
  37. text: ''
  38. },
  39. subtitle: {
  40. text: ''
  41. },
  42. exporting: {
  43. enabled:false//右上角打印等信息
  44. },
  45. credits:{
  46. enabled:false //禁用版权信息
  47. },
  48. tooltip: {
  49. headerFormat: '<span style="color:{series.color};"></span><span>{point.key}</span>',
  50. pointFormat: '<table>'+
  51. '<tr><td style="color:{series.color};">{series.name}:</td>' +
  52. '<td><b>{point.y:.0f}</b></td></tr>',
  53. footerFormat:'</table>',
  54. shared: true,
  55. useHTML: true,
  56. xDateFormat:'%Y-%m-%d %H:%M:%S '
  57. },
  58. //3.type:"datetime"
  59. xAxis: {
  60. type:"datetime",
  61. dateTimeLabelFormats: {
  62. millisecond: '%Y-%m-%d %H:%M:%S',
  63. second: '%Y-%m-%d %H:%M:%S',
  64. minute: '%Y-%m-%d %H:%M:%S',
  65. hour: '%Y-%m-%d %H:%M:%S',
  66. day: '%Y-%m-%d %H:%M:%S',
  67. month: '%Y-%m-%d %H:%M:%S',
  68. year: '%Y-%m-%d %H:%M:%S'
  69. }
  70.  
  71. },
  72. yAxis: {
  73. title: {
  74. text: 'yname'
  75. },
  76. plotLines: [{
  77. value: 0,
  78. width: 1,
  79. color: '#808080'
  80. }]
  81. },
  82. legend: {
  83. layout: 'vertical',
  84. align: 'center',
  85. verticalAlign: 'bottom',
  86. borderWidth: 0
  87. },
  88. series: [{
  89. name:'series',
  90. data:data
  91. }]
  92. });
  93. }
  94.  
  95. </script>
  96. </head>
  97.  
  98. <body style="text-align: center;">
  99. <div id="content" style="width:100%;min-width: 310px;margin: 0 auto"></div>
  100. </body>
  101. </html>

  效果图:

  

生平第一次写博客,这样讲不知道大家能不能看懂。

  

  

highcharts时间图的更多相关文章

  1. HighCharts: 设置时间图x轴的宽度

    这个x轴宽度的设置整了好久,被老板催的要死 highcharts的api文档很难找,找了半天也没找到,网上资料少,说的试了下,也没有,我用的图里api文档里没有介绍,这个属性不知道的话,根本不好找.为 ...

  2. Highcharts中国地图热力图

    最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...

  3. Highcharts入门小示例

    一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...

  4. Highcharts配置

    一.基础使用 <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> ...

  5. highcharts .net导出服务 和 两种导出方式

    highcharts 的Net导出服务  GitHub上整理的https://github.com/imclem/Highcharts-export-module-asp.net 引用两个程序集 sh ...

  6. 《Learning Highcharts》中文翻译

    在highcarts的官方网站上推荐了一本书,由于highchart在平时工作中会用到,所以我们尝试将其翻译成中文,仅作为学习highchart工具的一种方式,以方便日后查阅. 翻译图书作为学习笔记, ...

  7. highcharts饼状图使用案例

    在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...

  8. highcharts

    preparation Highcharts Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用 ...

  9. highcharts使用笔记

    1.legend取消点击事件: 饼图:plotOptions.pie.point.events.legendItemClick = function() {return false;} 其他,如:pl ...

随机推荐

  1. 算法 python实现(二) 冒泡排序

    首先说一下 冒泡排序 是怎么做的: 总体的想法是,把小的轻的浮上前面去,把大的重的沉到后面去. 这样设置两个指针,i j, 1. i标识每一趟循环.这一趟的目的是把后面那些未排序的数列中最小的浮上前面 ...

  2. 再也不用担心ie下console.log报错了。。。

    习惯了在ff或者chrome下暴力调试的你会不会忘记注释掉而在ie下报错呢,那么可以加这个代码: if (typeof console == "undefined") { this ...

  3. Android学习笔记(十二)BroadcastReceiver的有序广播和优先级

    前两篇博文中简单整理了普通广播,其实还有有序广播,有序广播在开发中也是比不可少的,可以给广播接收者设定优先级来控制接受顺序,并却可以中断广播传递等等. 一.两种Broadcast: · 普通广播(No ...

  4. 【转】Flask快速入门

    迫不及待要开始了吗?本页提供了一个很好的 Flask 介绍,并假定你已经安装好了 Flask.如果没有,请跳转到 安装 章节. 一个最小的应用 一个最小的 Flask 应用看起来会是这样: from ...

  5. 《神经网络和深度学习》系列文章十二:Hadamard积,s⊙t

    出处: Michael Nielsen的<Neural Network and Deep Learning>,点击末尾“阅读原文”即可查看英文原文. 本节译者:哈工大SCIR本科生 王宇轩 ...

  6. 第十一章、认识与学习 BASH Bash Shell 的操作环境

    bash中的变量动不动就说环境变量,真是奇怪,bash只是一个c语言编写的程序而已,跟环境变量有什么关系?如果知道dos的历史的话就知道有个时代是只有命令行界面而没有图形用户界面,这只小小的程序就包揽 ...

  7. 1116 HTML CSS

    1. JPEG和GIF在使用时的注意事项: JPEG可以连续调次(复制品中有中间层次,如照片)图像中获得最好效果:JPEG可以用1600万色显示图像,是有损格式,不支持透明. GIF适用于几种纯色组成 ...

  8. mdk编译遇见的错误(LX4F120H),望各位指点迷津

    程序如下 #define tBoolean int#define GPIO_PORTA_BASE g_pulGPIOBaseAddrs[0]#include "lib/gpio.h" ...

  9. GXT之旅:第三章:表单和窗口(4)——表单的提交和RPC

    表单使用HTTP提交 表单有两种提交方式,第一种就是传统的HTTP提交. 最直接的步骤就是: 使用FormPanel的setAction()方法,去定义submit的URL 使用FormPanel的i ...

  10. WPF passwordbox 圆角制作

    将以下节点复制到app.xaml的<Application.Resources>节点下 <Style TargetType="PasswordBox">   ...