从Highchart的x轴上删除DateTime [英] Remove DateTime from Highchart's x-axis

问题描述

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

What I have is a Highchart plotting data points every second. 1 data point per second. Now, On the X-axis what I have is the Timedata.

我想要的是从x轴上删除时间数据，而不是我只想显示否.点数.正在被绘制.

What I want is that to remove the time data from the x-axis and instead of that I just want to show the no. of points count. that is being plotted.

这是数据图的演示代码.

Here is the Demo code of the data plots how it looks.

       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;
        }())
    }]
});

这里是小提琴.

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

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

I just want to remove the timedata from the X-axis.

推荐答案

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

You can achieve it by adding custom logic to xAxis.tickPositioner to return appropriate tick positions and xAxis.labels.formatter to change the timestamps into proper point count. Check the demo and code posted below.

代码:

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

这篇关于从Highchart的x轴上删除DateTime的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！