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

  • 相关阅读:
    sql优化
    es和solr
    RabbitMQ 整理
    redis分布式缓存
    redis集群
    drf-jwt第三方插件,DRF的三大认证的具体使用,多方式登陆的实现
    自定义路由组件,Django的admin后台管理,DRF的三大认证,jwt认证
    DRF视图家族
    导包补充,深度查询(深度序列化),十大接口
    三流,内部类,基表,表关系,断开表关联,外键字段属性
  • 原文地址:https://www.cnblogs.com/jiajinyi/p/3377193.html
Copyright © 2011-2022 走看看