2014-11-07 77 views
1

我希望x軸的時間間隔爲半個月。我想通了,我可以用pointInterval,但我不知道爲什麼它如預期highcart.js pointInterval 15天datetime x軸

http://jsfiddle.net/nizsu/otatsrbq/

我希望在x軸上的值是不工作:8月26日,09月11日,09月26日

HTML

<div class="module" id="changelist"> 
      <div id="chart1" style="min-width: 90%; height: 400px; margin: 0 auto"></div> 
     </div> 

JS

$(function() { 
    $('#chart1').highcharts({  
     xAxis: { 
      type: 'datetime', 
      pointInterval: 13 * 24 * 3600 * 1000, //half month interval 
      pointStart: Date.UTC(2014, 7, 26), 
      dateTimeLabelFormats: { 
       month: '%b %e', 
       year: '%b' 
      } 
     }, 
     series: [{ 
      name: 'New Visits', 
      data: [ 
       [Date.UTC(2014, 7, 26), 50], 
       [Date.UTC(2014, 7, 27), 60], 
       [Date.UTC(2014, 7, 28), 65], 
       [Date.UTC(2014, 7, 29), 70], 
       [Date.UTC(2014, 7, 30), 20], 
       [Date.UTC(2014, 7, 31), 10], 
       [Date.UTC(2014, 8, 1), 75], 
       [Date.UTC(2014, 8, 2), 80], 
       [Date.UTC(2014, 8, 3), 85], 
       [Date.UTC(2014, 8, 4), 77], 
       [Date.UTC(2014, 8, 5), 70], 
       [Date.UTC(2014, 8, 6), 20], 
       [Date.UTC(2014, 8, 7), 17], 
       [Date.UTC(2014, 8, 8), 80], 
       [Date.UTC(2014, 8, 9), 75], 
       [Date.UTC(2014, 8, 10), 73], 
       [Date.UTC(2014, 8, 11), 78], 
       [Date.UTC(2014, 8, 12), 82], 
       [Date.UTC(2014, 8, 13), 15], 
       [Date.UTC(2014, 8, 14), 18], 
       [Date.UTC(2014, 8, 15), 65], 
       [Date.UTC(2014, 8, 16), 70], 
       [Date.UTC(2014, 8, 17), 67], 
       [Date.UTC(2014, 8, 18), 73], 
       [Date.UTC(2014, 8, 19), 80], 
       [Date.UTC(2014, 8, 20), 17], 
       [Date.UTC(2014, 8, 21), 22], 
       [Date.UTC(2014, 8, 22), 65], 
       [Date.UTC(2014, 8, 23), 63], 
       [Date.UTC(2014, 8, 24), 68], 
       [Date.UTC(2014, 8, 25), 65], 
       [Date.UTC(2014, 8, 26), 70] 
      ] 
     }, { 
      name: 'Total Visits', 
      data: [ 
       [Date.UTC(2014, 7, 26), 75], 
       [Date.UTC(2014, 7, 27), 78], 
       [Date.UTC(2014, 7, 28), 80], 
       [Date.UTC(2014, 7, 29), 85], 
       [Date.UTC(2014, 7, 30), 35], 
       [Date.UTC(2014, 7, 31), 30], 
       [Date.UTC(2014, 8, 1), 90], 
       [Date.UTC(2014, 8, 2), 95], 
       [Date.UTC(2014, 8, 3), 95], 
       [Date.UTC(2014, 8, 4), 97], 
       [Date.UTC(2014, 8, 5), 93], 
       [Date.UTC(2014, 8, 6), 30], 
       [Date.UTC(2014, 8, 7), 25], 
       [Date.UTC(2014, 8, 8), 90], 
       [Date.UTC(2014, 8, 9), 95], 
       [Date.UTC(2014, 8, 10), 93], 
       [Date.UTC(2014, 8, 11), 99], 
       [Date.UTC(2014, 8, 12), 95], 
       [Date.UTC(2014, 8, 13), 35], 
       [Date.UTC(2014, 8, 14), 30], 
       [Date.UTC(2014, 8, 15), 95], 
       [Date.UTC(2014, 8, 16), 94], 
       [Date.UTC(2014, 8, 17), 92], 
       [Date.UTC(2014, 8, 18), 95], 
       [Date.UTC(2014, 8, 19), 100], 
       [Date.UTC(2014, 8, 20), 30], 
       [Date.UTC(2014, 8, 21), 33], 
       [Date.UTC(2014, 8, 22), 95], 
       [Date.UTC(2014, 8, 23), 91], 
       [Date.UTC(2014, 8, 24), 90], 
       [Date.UTC(2014, 8, 25), 94], 
       [Date.UTC(2014, 8, 26), 95] 
      ] 
     }] 
    });  
    }); 
+0

如果你需要半個motnh(15天),爲什麼你設置13? – 2014-11-07 10:50:01

回答

1

設置你想要的是tickInterval ,而不是點間隔。您還需要指定startOnTick:true以使其從第一個點開始。

xAxis: { 
     type: 'datetime', 
     tickInterval: 13 * 24 * 3600 * 1000, //half month interval 
     pointStart: Date.UTC(2014, 7, 26), 
     startOnTick: true, 
     dateTimeLabelFormats: { 
      month: '%b %e', 
      year: '%b' 
     } 
    }, 

http://jsfiddle.net/pdy4deew/