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

原文地址:https://www.cnblogs.com/jiajinyi/p/3377193.html