javascript - 从 Highcharts x 轴中删除日期时间

Question

我拥有的是每秒绘制数据点的 Highchart。每秒 1 个数据点。现在，X 轴上有时间数据。

我想要的是从 x 轴上删除时间数据，而不是我只想显示编号。点数计数。正在绘制。

这里是数据绘图的演示代码。

       numArray = [1,5,3,5,6,3,3,7,4,6,7,3,5,3,6,7,5,2,5,7,4,6,4,5,3,6,7,8,5,4,3,6,7,8,5,7,8,8,5,3,2,4,6,7,4,6,7] ;


        var json_array =numArray ;

        var i = 0;
        function next() {  

          return json_array[i++];
        }
        Highcharts.chart('container', {
    chart: {
        type: 'line',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function() {

                // set up the updating of the chart each second
                var series = this.series[0],
                    chart = this;

                setInterval(function() {
                    var x = (new Date()).getTime(), // current time
                        y =next();
                        console.log(y) ;
                    series.addPoint([x, y], false, true);
                }, 1000);

                setInterval(function() {
                    chart.redraw(false);
                }, 1000);
            }
        }
    },

    time: {
        useUTC: false
    },

    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        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
    },
    series: [{
        animation: false,
        name: 'Random data',
        data: (function() {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -1000; i <= 0; i += 1) {
                data.push([
                    time + i * 10,
                    null
                ]);
            }
            return data;
        }())
    }]
});

这是它的 fiddle 。

https://jsfiddle.net/abnitchauhan/jb36fLwq/

我只想从 X 轴删除时间数据。

Answer 1

您可以通过向 xAxis.tickPositioner 添加自定义逻辑来实现此目的，以返回适当的刻度位置，并向 xAxis.labels.formatter 添加自定义逻辑以将时间戳更改为正确的点数。检查下面发布的演示和代码。

代码:

xAxis: {
  type: 'datetime',
  tickPixelInterval: 150,
  tickPositioner: function() {
    var axis = this,
      chart = axis.chart,
      ticks = [],
      divider;

    if (axis.series[0].points && axis.series[0].points.length) {
      ticks = axis.series[0].points.filter(point => point.y !== null).map(point => point.x);
    }

    divider = Math.ceil(ticks.length / 20);
    chart.customLabelDivider = divider;

    if (divider > 1) {
      ticks = ticks.filter((tick, i) => i % divider === 0);
    }

    return ticks;
  },
  labels: {
    formatter: function() {
      var chart = this.chart;

      if (this.isFirst) {
        chart.customLabelCount = 1;
      } else {
        chart.customLabelCount += chart.customLabelDivider;
      }

      return chart.customLabelCount;
    }
  }
}

演示:

• https://jsfiddle.net/BlackLabel/w2s8Le04/

API引用:

• https://api.highcharts.com/highcharts/xAxis.tickPositioner

• https://api.highcharts.com/highcharts/xAxis.labels.formatter