Highcharts 24小时制

Question

我有一张图表显示了根据发布时间标签的流程。我希望X轴从00:00开始以小时显示时间，并在1小时之间显示24小时至23:00的整个周期。这是问题，它只显示00：00-22：00，我不能理解为什么。这里是代码：

var Chart = (function() { 
    function Chart() { 
     var _this = this; 
     this.data = { "TW": [174, 5, 278, 269, 282, 283, 271, 316, 251, 265, 273, 261, 265, 265, 45, 45, 60, 60, 46, 370, 428, 465, 404, 372], "IG": [266, 217, 221, 240, 220, 206, 193, 219, 186, 233, 213, 213, 243, 243, 109, 115, 128, 136, 196, 360, 483, 432, 382, 303], "GP": [31, 14, 13, 17, 14, 11, 8, 13, 12, 11, 20, 45, 22, 29, 17, 19, 27, 21, 18, 24, 37, 35, 20, 21], "total": 12009, "toptags": [{ "tag": "#paradisehotelSE", "count": 3600 }, { "tag": "#TV4", "count": 3240 }, { "tag": "#IdolSE", "count": 3126 }] }; 
     this.load(function() { 
      _this.googleplus = _this.getData('googleplus'); 
      _this.twitter = _this.getData('twitter'); 
      _this.instagram = _this.getData('instagram'); 

      _this.init(); 
     }); 

Chart.prototype.init = function() { 
     var hour = 3600 * 1000; 

     $('#graph').highcharts({ 
      chart: { 
       backgroundColor: 'none', 
       type: 'spline', 
       spacingBottom: 0, 
       spacingTop: 0, 
       spacingLeft: 1, 
       spacingRight: 1, 
       width: null, 
       height: 270, 
       animation: 2000 
      }, 
      title: { 
       text: '' 
      }, 
      subtitle: { 
       text: '' 
      }, 
      legend: { 
       enabled: false 
      }, 
      credits: { 
       enabled: false 
      }, 
      xAxis: { 
       labels: { 
        y: 12, 
        align: 'left', 
        style: { 
         color: 'white', 
         fontWeight: 'normal', 
         fontFamily: 'Open Sans' 
        } 
       }, 
       showLastLabel: false, 
       tickmarkPlacement: 'on', 
       tickPosition: 'inside', 
       tickWidth: 0, 
       tickPixelInterval: 60, 
       lineWidth: 2, 
       lineColor: 'rgba(255,255,255,0.6)', 
       maxPadding: 0, 
       minPadding: 0, 
       gridLineWidth: 0, 
       offset: 20, 
       startOnTick: true, 
       type: 'datetime', 
       dateTimeLabelFormats: { 
        day: '%H:%M' 
       } 
      }, 
      yAxis: { 
       minorTickPosition: 'inside', 
       gridLineColor: 'rgba(255,255,255,0.3)', 
       gridLineWidth: 0, 
       title: { 
        enabled: false, 
        text: 'Temperature' 
       }, 
       labels: { 
        enabled: false 
       } 
      }, 
      tooltip: { 
       backgroundColor: 'rgba(0,0,0,0.0)', 
       borderColor: 'none', 
       shadow: false, 
       style: { 
        color: 'white', 
        fontSize: '12px', 
        padding: '8px' 
       }, 
       enabled: true, 
       crosshairs: false, 
       shared: false, 
       snap: 30, 
       formatter: function() { 
        return Math.floor(this.y); 
       } 
      }, 
      plotOptions: { 
       flags: { 
        shape: 'squarepin' 
       }, 
       spline: { 
        dashStyle: 'ShortDot', 
        lineWidth: 4 
       } 
      }, 
      series: [ 
       { 
        pointStart: 0 * hour, 
        pointInterval: hour, 
        color: '#fda345', 
        name: 'Google plus', 
        marker: { enabled: false }, 
        data: this.googleplus 
       }, 
       { 
        pointStart: 0 * hour, 
        pointInterval: hour, 
        color: '#00aced', 
        name: 'Twitter', 
        marker: { enabled: false }, 
        data: this.twitter 
       }, 
       { 
        pointStart: 0 * hour, 
        pointInterval: hour, 
        color: '#f49ac1', 
        name: 'Instagram', 
        marker: { enabled: false }, 
        data: this.instagram 
       }] 
     }); 

这是所有与图表相关的Javascript，非常感谢您的关注。

Answer 1

您的图确实显示22:00至23:00的数据。不过，问题在于23点报时被压制。

为什么？问题一，你已告诉高分榜startOnTick，但你还没有启用相应的endOnTickoption。问题二，你的maxPadding选项。通过将其设置为0并且数据在23:00结束，您已给Highcharts没有空间添加最后一个刻度标签。

//maxPadding: 0, 
endOnTick: true 

这是fiddle。