这篇文章适合对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. Android图形系统之Surface、SurfaceView、SurfaceHolder及SurfaceHolder.Callback开发实例

    原文:Android图形系统之Surface.SurfaceView.SurfaceHolder及SurfaceHolder.Callback之间的联系 Surface是原始图像缓冲区(raw buf ...

  2. linux IPC总结——管道

    管道 管道是unix ipc的最古老形式,是一种在内存中的特殊文件,只能在具有公共祖先的进程之间使用(即父子进程,兄弟进程). 管道由pipe函数创建 #include <unistd.h> ...

  3. Eclipse插件收藏列表

    viPlugin 2.11.0 AnyEdit Tools 2.4.4 EclipseColorer 0.8.0 PyDev – Python IDE for Eclipse 2.7.5 MoreUn ...

  4. Yii快速入门教程

    Ⅰ.基本概念一.入口文件入口文件内容:一般格式如下:<?php$yii=dirname(__FILE__).'/../../framework/yii.php';//Yii框架位置$config ...

  5. DirectShow Filter 开发典型例子分析 ——字幕叠加 （FilterTitleOverlay）1

    本文分析一下<DirectShow开发指南>中的一个典型的Transform Filter的例子:字幕叠加(FilterTitleOverlay).通过分析该例子,我们可以学习到Direc ...

  6. cocos 事件转发

    CCDirector在函数setOpenGLView中设置pobOpenGLView,同时会掉用 m_pobOpenGLView->setTouchDelegate(m_pTouchDispat ...

  7. 探索AutoLayout的本质和解决一些问题

    最近频繁使用AutoLayout,记录下自己的一些发现和问题的解决(不是教程) 1.简介 Auto Layout 是苹果在 iOS 6中新引入的布局方式,旨在解决不同尺寸屏幕的适配问题. 屏幕适配工作 ...

  8. Day 3 @ RSA Conference Asia Pacific & Japan 2016 （morning）

    09.00 – 09.45 hrs Tracks Cloud, Mobile, & IoT Security    A New Security Paradigm for IoT (Inter ...

  9. [TypeScript] Installing TypeScript and Running the TypeScript Compiler (tsc)

    This lesson shows you how to install TypeScript and run the TypeScript compiler against a .ts file f ...

  10. android 62 手机存储目录的划分

    android下应用程序的路径和javase不同,应用程序的数据要保存自己的文件夹里面 > > getFileDir(); 获取自己的文件夹 /data/data/包名(应用程序的名字)/ ...