highcharts时间图
这篇文章适合对highcharts已经有一定了解的猿友。
前两天想用highcharts做一个时间图,但是时间轴(x轴)的时间坐标并不是等间隔的,之前一直采用的方法是把时间做成等间隔的,然后没有数据的时间点数据填充为null.这种策略显然不好,LZ想从根本上解决这一问题,让highcharts自己对时间进行处理,思路当然就是借助highcharts本身的机制.(版本:Highcharts-4.2.6)。
翻看highcharts api,xAxis部分的type属性可取值有datetime,点击查看 datetime with irregular intervals例子:
LZ按照这个例子整理了一个基于本地时间的散点图:
- <!DOCTYPE html>
- <html>
- <head>
- <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
- <script src="https://code.highcharts.com/highcharts.js"></script>
- <script type="text/javascript">
- //数据
- //1.数据格式是这样的,一个时间和一个数据点放在一起。
- //另外,时间以时间戳的形式展示,实际开发中时间往往是以yyyy-MM-dd hh:mi:ss格式存在数据库中,
- //以java为例:从数据库拿到java.util.Date后,直接调用getTime()方法即可。
- var data = [[1478050088000,856],
- [1478050364000,781],
- [1478050786000,744],
- [1478050864000,732],
- [1478050775000,775],
- [1478050297000,785]];
- $(function () {
- drawChart();
- });
- function drawChart(){
- //2.highcharts默认使用utc时间格式,关闭utc,使用本地时间
- Highcharts.setOptions({
- global: {
- useUTC: false
- }
- });
- var chartPic = new Highcharts.Chart({
- colors: ["#01D26D"],
- chart: {
- renderTo: 'content',
- type: 'scatter',
- zoomType: 'xy',
- },
- title: {
- text: ''
- },
- subtitle: {
- text: ''
- },
- exporting: {
- enabled:false//右上角打印等信息
- },
- credits:{
- enabled:false //禁用版权信息
- },
- tooltip: {
- headerFormat: '<span style="color:{series.color};"></span><span>{point.key}</span>',
- pointFormat: '<table>'+
- '<tr><td style="color:{series.color};">{series.name}:</td>' +
- '<td><b>{point.y:.0f}</b></td></tr>',
- footerFormat:'</table>',
- shared: true,
- useHTML: true,
- xDateFormat:'%Y-%m-%d %H:%M:%S '
- },
- //3.type:"datetime"
- xAxis: {
- type:"datetime",
- dateTimeLabelFormats: {
- millisecond: '%Y-%m-%d %H:%M:%S',
- second: '%Y-%m-%d %H:%M:%S',
- minute: '%Y-%m-%d %H:%M:%S',
- hour: '%Y-%m-%d %H:%M:%S',
- day: '%Y-%m-%d %H:%M:%S',
- month: '%Y-%m-%d %H:%M:%S',
- year: '%Y-%m-%d %H:%M:%S'
- }
- },
- yAxis: {
- title: {
- text: 'yname'
- },
- plotLines: [{
- value: 0,
- width: 1,
- color: '#808080'
- }]
- },
- legend: {
- layout: 'vertical',
- align: 'center',
- verticalAlign: 'bottom',
- borderWidth: 0
- },
- series: [{
- name:'series',
- data:data
- }]
- });
- }
- </script>
- </head>
- <body style="text-align: center;">
- <div id="content" style="width:100%;min-width: 310px;margin: 0 auto"></div>
- </body>
- </html>
效果图:
生平第一次写博客,这样讲不知道大家能不能看懂。
highcharts时间图的更多相关文章
- HighCharts: 设置时间图x轴的宽度
这个x轴宽度的设置整了好久,被老板催的要死 highcharts的api文档很难找,找了半天也没找到,网上资料少,说的试了下,也没有,我用的图里api文档里没有介绍,这个属性不知道的话,根本不好找.为 ...
- Highcharts中国地图热力图
最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...
- Highcharts入门小示例
一.创建条形图 1.创建div容器 <div id="container" style="min-width:800px;height:400px"> ...
- Highcharts配置
一.基础使用 <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> ...
- highcharts .net导出服务 和 两种导出方式
highcharts 的Net导出服务 GitHub上整理的https://github.com/imclem/Highcharts-export-module-asp.net 引用两个程序集 sh ...
- 《Learning Highcharts》中文翻译
在highcarts的官方网站上推荐了一本书,由于highchart在平时工作中会用到,所以我们尝试将其翻译成中文,仅作为学习highchart工具的一种方式,以方便日后查阅. 翻译图书作为学习笔记, ...
- highcharts饼状图使用案例
在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...
- highcharts
preparation Highcharts Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用 ...
- highcharts使用笔记
1.legend取消点击事件: 饼图:plotOptions.pie.point.events.legendItemClick = function() {return false;} 其他,如:pl ...
随机推荐
- 算法 python实现(二) 冒泡排序
首先说一下 冒泡排序 是怎么做的: 总体的想法是,把小的轻的浮上前面去,把大的重的沉到后面去. 这样设置两个指针,i j, 1. i标识每一趟循环.这一趟的目的是把后面那些未排序的数列中最小的浮上前面 ...
- 再也不用担心ie下console.log报错了。。。
习惯了在ff或者chrome下暴力调试的你会不会忘记注释掉而在ie下报错呢,那么可以加这个代码: if (typeof console == "undefined") { this ...
- Android学习笔记(十二)BroadcastReceiver的有序广播和优先级
前两篇博文中简单整理了普通广播,其实还有有序广播,有序广播在开发中也是比不可少的,可以给广播接收者设定优先级来控制接受顺序,并却可以中断广播传递等等. 一.两种Broadcast: · 普通广播(No ...
- 【转】Flask快速入门
迫不及待要开始了吗?本页提供了一个很好的 Flask 介绍,并假定你已经安装好了 Flask.如果没有,请跳转到 安装 章节. 一个最小的应用 一个最小的 Flask 应用看起来会是这样: from ...
- 《神经网络和深度学习》系列文章十二:Hadamard积,s⊙t
出处: Michael Nielsen的<Neural Network and Deep Learning>,点击末尾“阅读原文”即可查看英文原文. 本节译者:哈工大SCIR本科生 王宇轩 ...
- 第十一章、认识与学习 BASH Bash Shell 的操作环境
bash中的变量动不动就说环境变量,真是奇怪,bash只是一个c语言编写的程序而已,跟环境变量有什么关系?如果知道dos的历史的话就知道有个时代是只有命令行界面而没有图形用户界面,这只小小的程序就包揽 ...
- 1116 HTML CSS
1. JPEG和GIF在使用时的注意事项: JPEG可以连续调次(复制品中有中间层次,如照片)图像中获得最好效果:JPEG可以用1600万色显示图像,是有损格式,不支持透明. GIF适用于几种纯色组成 ...
- mdk编译遇见的错误(LX4F120H),望各位指点迷津
程序如下 #define tBoolean int#define GPIO_PORTA_BASE g_pulGPIOBaseAddrs[0]#include "lib/gpio.h" ...
- GXT之旅:第三章:表单和窗口(4)——表单的提交和RPC
表单使用HTTP提交 表单有两种提交方式,第一种就是传统的HTTP提交. 最直接的步骤就是: 使用FormPanel的setAction()方法,去定义submit的URL 使用FormPanel的i ...
- WPF passwordbox 圆角制作
将以下节点复制到app.xaml的<Application.Resources>节点下 <Style TargetType="PasswordBox"> ...