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 两条折现的 数据点并不对应。

  • 相关阅读:
    利用runtime检測这个对象是否存在某属性?
    Android Studio 使用 SVN 必然遇到问题:commit ** File out of data 问题解决方法
    JPA測试实例
    pat(A) 1063. Set Similarity(STL)
    @Override用在哪儿
    Highcharts数据表示(3)
    #pragma pack (n) 惹的祸
    C++二阶构造函数
    使用自定义的控件
    C++ explicit
  • 原文地址:https://www.cnblogs.com/jiajinyi/p/3377193.html
Copyright © 2011-2022 走看看