zoukankan      html  css  js  c++  java
  • (转) HighCharts 非规律日期 多条曲线的 绘画

    转自:http://blog.csdn.net/z69183787/article/details/8651296

    项目中需要为A,B 2个元素 绘出统计值的曲线,但A与B 的 时间点 并不一致,查找HighCharts API后 ,发现了解决方法

    [javascript] view plaincopy
    1. $(function () {  
    2.     var chart = new Highcharts.Chart({  
    3.       
    4.         chart: {  
    5.             renderTo: 'container'  
    6.         },  
    7.       
    8.         xAxis: {  
    9.             type: 'datetime',  
    10.              labels: {  
    11.                 formatter: function() {  
    12.                          
    13.                                return  Highcharts.dateFormat('%Y-%m-%d'this.value);  
    14.                 },  
    15.                   
    16.                 }  
    17.         },  
    18.          tooltip: {    
    19.              shared : true,  
    20.             xDateFormat: '%Y-%m-%d'//鼠标移动到趋势线上时显示的日期格式    
    21.         },    
    22.         series: [{  
    23.             name: 'A',  
    24.             data: [  
    25.                 [Date.UTC(2010, 0, 1), 29.9],  
    26.                 [Date.UTC(2010, 0, 2), 71.5],  
    27.                 [Date.UTC(2010, 0, 3), 106.4],  
    28.                 [Date.UTC(2010, 0, 6), 129.2],  
    29.                 [Date.UTC(2010, 0, 7), 144.0],  
    30.                 [Date.UTC(2010, 0, 8), 176.0]  
    31.              ]  
    32.         },  
    33.                  {     name: 'B',  
    34.             data: [  
    35.                 [Date.UTC(2010, 0, 1), 29.9],  
    36.                 [Date.UTC(2010, 0, 3), 71.5],  
    37.                 [Date.UTC(2010, 0, 7), 106.4],  
    38.                 [Date.UTC(2010, 0, 10), 129.2],  
    39.                 [Date.UTC(2010, 0, 24), 144.0],  
    40.                 [Date.UTC(2010, 0, 30), 176.0]  
    41.              ]  
    42.         }]  
    43.       
    44.     });  
    45. });  



    http://jsfiddle.net/GxYM3/


    可以看到X轴上的时间点与 A,B 两条折现的 数据点并不对应。

  • 相关阅读:
    (转)前端开发框架选型清单
    (转)关于java和web项目中的相对路径问题
    (转)phonegap 数据库详解
    (转)SQLite数据库增删改查操作
    (转)JS中innerHTML,innerText,value
    (转)js函数参数设置默认值
    (转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage
    (转)HTML5开发学习(3):本地存储之Web Sql Database
    [笔记]普通平衡树(Splay)
    [笔记][题解]树链剖分&lgP3384
  • 原文地址:https://www.cnblogs.com/jiajinyi/p/3377193.html
Copyright © 2011-2022 走看看