X轴标签为类别未正确显示：高图

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轴点只是更新其No，而不是移动。

Answer 1

尝试将xAxis.type设置为'datetime'代替'category'。