2016-08-17 83 views
0

我需要在Highcharts中每隔5天显示一次我的x轴,但由于某些原因日期正常显示。5天的打勾时间间隔

这是我的小提琴。

https://jsfiddle.net/nk3q5ejL/3/

代码:

$(function() { 
    $('#container').highcharts({ 
     title: { 
      text: 'Monthly Average Temperature', 
      x: -20 //center 
     }, 
     subtitle: { 
      text: 'Source: WorldClimate.com', 
      x: -20 
     }, 
     xAxis: { 
      categories: ["10/08/2015", "10/09/2015", "10/10/2015", "10/11/2015", "10/12/2015", "10/13/2015", "10/14/2015", "10/15/2015", "10/16/2015", "10/17/2015", "10/18/2015", "10/19/2015"], 
    tickInterval: 24 * 3600 * 1000 * 5, 
     }, 
     yAxis: { 
      title: { 
       text: 'Temperature (°C)' 
      }, 
      plotLines: [{ 
       value: 0, 
       width: 1, 
       color: '#808080' 
      }] 
     }, 
     tooltip: { 
      valueSuffix: '°C' 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'middle', 
      borderWidth: 0 
     }, 
     series: [{ 
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
     }, { 
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] 
     }, { 
      name: 'Berlin', 
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] 
     }, { 
      name: 'London', 
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
     }] 
    }); 
}); 

回答

0

我怕你可以使用在tickInterval毫秒为单位,如果你的图表有日期时间轴线,这似乎并没有这样的情况(见例如http://api.highcharts.com/highcharts#xAxis.dateTimeLabelFormats) ,你只是使用一个字符串数组作为你的X轴的类别。

如果为每5天显示x轴,你指的是具有2015年10月8日,2015年10月13日,2015年10月18日等,只要使用tickInterval: 5和会做的伎俩。

我修改与变化的提琴:https://jsfiddle.net/nk3q5ejL/4/

商祺!