Remove DateTime from Highchart's x-axis

给你一囗甜甜゛ 提交于 2021-01-29 09:12:00

问题


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.

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

Here is the Fiddle of it.

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

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


回答1:


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.

Code:

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;
    }
  }
}

Demo:

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

API reference:

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

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




回答2:


From the Docs, you can disable the X-axis labels like below

    xAxis: {

        labels: {
            enabled: false
        }
    },

Here is the updated JSFiddle



来源:https://stackoverflow.com/questions/58317277/remove-datetime-from-highcharts-x-axis

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!