这篇文章适合对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时间图的更多相关文章

  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. c# const与readonly 关键字的比较

    C#中,const 与readonly是两个比较有用的关键字.const 与 readonly 定义的数据成员在初始化都不能再改变. 比如定义了 public class MathUtitlity   ...

  2. 2 weekend110的zookeeper的原理、特性、数据模型、节点、角色、顺序号、读写机制、保证、API接口、ACL、选举、 + 应用场景：统一命名服务、配置管理、集群管理、共享锁、队列管理

    在hadoop生态圈里,很多地方都需zookeeper. 启动的时候,都是普通的server,但在启动过程中,通过一个特定的选举机制,选出一个leader. 只运行在一台服务器上,适合测试环境:Zoo ...

  3. PAT 1026. Table Tennis

    A table tennis club has N tables available to the public.  The tables are numbered from 1 to N.  For ...

  4. STL源码剖析之list的sort函数实现

    SGI  STL的list的函数的实现源码大致如下: //list 不能使用sort函数,因为list的迭代器是bidirectional_iterator, 而sort //sort函数要求rand ...

  5. java从mysql导出数据例子

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  6. 基于Shading Model（对光照变化一定不变性）的运动目标检测算法

    光照模型(Shading Model)在很多论文中得到了广泛的应用,如robust and illumination invariant change detection based on linea ...

  7. Android M(6.0) 权限爬坑之旅

    坑一:用Android5.0编译的apk,在Android6.0上运行完全没有问题. 在Android6.0以上才需要在运行时请求权限,在旧Android版本上保留原有逻辑,安装时授予权限. 用旧版本 ...

  8. Java JDBC批处理插入数据操作(转)

    在此笔记里,我们将看到我们如何可以使用像Statement和PreparedStatement JDBC API来批量在任何数据库中插入数据.此外,我们将努力探索一些场景,如在内存不足时正常运行,以及 ...

  9. TCP keepalive

      2. TCP keepalive overview In order to understand what TCP keepalive (which we will just call keepa ...

  10. windows修改mysql默认字符集不成功

    今天下午弄了半天,终于把mysql的默认字符集弄成了, 按照网上的说法,什么修改mysql下面的my.ini文件,把参数设置成utf-8,我反复操作,结果都是不成功,后来我把mysql5.0卸载了,网 ...