X 軸標簽作為類別未正確顯示：Highcharts

Question

當我嘗試在 Highcharts API 中創建動態流圖表時，我想到了一個奇怪的問題。

要記住的第一件事是，我需要將 X 軸數據顯示為category ，這就是為什么我在此示例中將date轉換為字符串格式的原因。

出現的問題是 X 軸標簽沒有正確顯示 x 軸上只有一個點是可見的，並且它也在改變它的值而不是移動。

這是我嘗試過的 JS 代碼。

Highcharts.chart('container', {
    chart: {
        type: 'line',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function() {
              var series = this.series[0],
                    chart = this;
                var count = 0;
                 var draw = setInterval(function() {

                    x  = countval(); 
                   //   var counter = j;
                   //   console.log("Count: ", counter);
                      y = next();
                   console.log("CountVal : ", x);
                   console.log("DataPoints: ", y);
                 /* if (counter == 1300) {
                        clearInterval(draw);
                        return;
                    }
           */
                    if (counter > 1000) {
                        series.addPoint([x, y], true, true, false);
                    } else {
                        series.addPoint([x, y], true, false, false);
                    }
                }, 1000/130 );
             }
        }
    },

    time: {
        useUTC: false
    },

    title: {
        text: 'ECG Graph Plot From MySQl Data'
    },
    xAxis: {
        type: 'category',
        tickInterval: 200,
     /*/   labels: {
      format: '{value:%H:%M:%S}',
      range: false,
    },/*/
      //  plotLines: generateDynamicPlotLines(),
       // crosshair: false
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        enabled: false,
      /*/  headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'/*/
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
     plotOptions: {
        series: {
            marker: {
                enabled: false
            },
            states: {
                        hover: {
                            enabled: false
                        }
                    }
        }
    },
    series: [{
            animation: false,
            name: 'ECG Graph Plot From MySQl Data',
            dataGrouping: {
                enabled: false
            },
            data: []
        },

    ]
});

為了進一步理解，您可以查看我擁有的顯示我的問題的小提琴。 您可以看到 X 軸的問題。

https://jsfiddle.net/abnitchauhan/8jtz2fwy/

我將tickInterval設置為 200，它不會繪制任何點。 如果我把tickPixelInterval 。 X 軸點只是更新它們的編號而不是移動。

Answer 1

嘗試將 xAxis.type 設置為 'datetime' 代替 'category'。