这篇文章适合对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. Web---自己写的一个简单云相册~

    实现的功能是: 用户可以一次上传一个至多个文件. 用户可以下载其他人上传的图片. 用户可以查看其他所有人的图片. 用户只能删除通过自己IP上传的图片. 用到的技术: 文件上传下载.设计模式.Dom4j ...

  2. Hdu 5213-Lucky 莫队,容斥原理,分块

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5213 Lucky Time Limit: 6000/3000 MS (Java/Others)    Me ...

  3. （转载）TRS内容管理平台用户注册逻辑漏洞

    首先 site:gov.cn inurl:WCM TRS 的内容管理系统是国内政府网站使用最多的系统之一 如上面所说:外交部 http://wcm.fmprc.gov.cn/wcm/ 网址加上:wcm ...

  4. Java Servlet 工作原理问答

    导读 本文来自stackoverflow的问答,讨论了Java Servlet的工作机制,如何进行实例化.共享变量和多线程处理. 问题:Servlet是如何工作的?Servlet 如何实例化.共享变量 ...

  5. Oracle数据库中将一个数据库中一张表的数据导入到另外一张表

    INSERT INTO DBTHNEW.L_MEMBER_ROLE_REL SELECT    *FROM    DBTH.L_MEMBER_ROLE_REL

  6. Guava库

    Guava是一个非常棒的库,它就是Java标准库"所缺失的那部分",是一个 Google 的基于java1.6的类库集合的扩展项目,包括 collections, caching, ...

  7. .jar是什么文件？(转载)

    JAR(Java ARchive,Java 归档)是一种与平台无关的文件格式,可将多个文件合成一个文件.用户可将多个 Java applet 及其所需组件(.class 文件.图像和声音)绑定到 JA ...

  8. find job

    处于找工作的状态... 优秀求职者的5个问题: 1.在刚进来2-3个月里,你希望我可以完成哪些工作? 2.公司的优秀员工共同特征是什么? 3.业余时间,公司的员工一般在干什么?

  9. Java SE Eclipse中引入第三方jar及class

    使用eclipse开发Java SE 总免不了需要引入第三方的jar或者calss文件.这里给大家说一下如何在eclipse中引入第三方jar或者calss文件. 让我们先了解一下eclipse项目中 ...

  10. 子窗体与父窗体传值操作的js示例

    //返回值给父窗体 function returnParent(value) {//获取子窗体返回值    var parent = window.dialogArguments; //获取父页面   ...