添加点时的Highchart更新类别

Question

背景

我试图使用高图显示动态小时的平均流量。也就是说我希望它像this一样反复显示流量，当时间到了23:00，我希望它回到0:00。

我这样做是通过设置24个类别['0:00'，'1：00'，'23：00']，并在ajax更新数据时添加点数，比如说每1秒。

var chart = new Highcharts.Chart({
  ...//some options
  xAxis: {
            categories:['0:00','1:00','2:00',...,'23:00']
         },
  load: function() {setInterval(updateData,1000)}
  series: [] //empty series here, adding dynamically by ajax
 })

updateData被定义为函数

function updateData(){
  var data = $.ajax(...)// get the data
  var series = chart.series[0];
  if(series.data.length < 24){ //when data.length is < 24 add directly
    chart.series[0].addPoint(data,true,false);
  }else{
    chart.series[0].addPoint(data,true,true);//set the 3rd option to true to remove the first data point, actually here this data is equal to the first one since this is a circle, when it comes to 24:00 it is actually 0:00, and I should update the xAxis.
    //code updating the axis categories to [1:00, 2:00...23:00,0:00]
    xAxis.setCategories(categories);
  }
}

x轴原来是[ 2:00 ，3：00，... 23：00,0：00， 24 ]，这是说我添加这个时间的点不对应于类别[24]：0：00，它实际上对应于不存在的类别[25]，因此默认设置为24。

解决方案（快速而肮脏）

不要对类别进行调整，而是向其推送一个新的圆圈，例如：

categories.push("time");//time is 0:00-23:00
xAxis.setCategories(categories);

但这会使类别越来越大......这很糟糕。 我该如何解决这个问题。

另一种解决方案（也存在一些问题）

通过使用datetime作为x轴的类型，还有另一个问题。我的数据格式如下：

time              count
8:00               23
9:00               56
...                ...

我可以构建像[时间，计数]这样的点，问题是我只有时间。即使我通过手动添加类似

的日期来构建数据

time = (new Date("2012-11-17 "+time)).getTime()

似乎可行。但是当它达到24小时后，样条曲线会回到图表的左侧，因为此处的x轴值等于第一个。 顺便说一句：如何让x轴只显示时间，上面的图像显示左侧的日期，时间间隔自动显示如何显示所有？ 谢谢你的关注!!!

我按照你的建议@Ruchit Rami修改了我的代码：

/*update part*/
var time = series.points.length > 0 ? series.points[series.points.length-1].category+3600 : 0;
//from 1970-1-1 0:00 And **add 1 hour everytime**
if (series.data.length < 24) {
series.addPoint([time, sum],true,false);
} else {
series.addPoint([time, sum],true,true);
}
/*chart part*/
xAxis: {
    type: 'datetime',
    dateTimeLabelFormat: {
      second: '%H:%M',
      minute: '%H:%M',
      hour: '%H:%M',
      day: '%H:%M',
      week: '%H:%M',
      month: '%H:%M',
      year: '%H:%M'
   }
   tickInterval: 3600
}

结果

我指定日期标签格式似乎没有受到影响 时间不对。为什么？谢谢！ 仍然没有显示正确的

Answer 1

要仅在X轴上显示时间，您可以使用xaxis的dateTimeLabelFormats属性，并且可以使用tickInterval在xaxis上设置刻度间隔。

 //Sets tickInterval to 24 * 3600 * 1000 if display is by day
                        tickInterval : 24 * 3600 * 1000,
                dateTimeLabelFormats : {
                hour : '%H:%M',
                    day : "%H:%M"        
                }

现在，对于第一点的图表重绘问题，您需要增加xaxis点的日期。我无法提出任何优雅的解决方案，但您可以动态添加新点，并在添加该点之前检查时间“0:00”，与系列中的最后一点相比，逐一增加其日期。
您可以通过series.points[series.points.length-1]找到该系列的最后一个点。
希望我没有错过任何东西。

Answer 2

现在，这可能不是你想要的，但我对你想要展示的内容做了一些假设：

• 每小时一个“日”0000-2300
的数据
• 不在乎时间显示日期
• 数据在给定时间内“天”波动

我创建了一个示例here的图表迭代4天“的数据。我通过首先创建一个空数据系列来绘制图表，然后在图表加载时每隔1.5秒迭代一次数据集来完成此操作。然后它循环回到开头。我用“天”来更新DIV。如果我错过了你需要的一些条件，请告诉我。

以下是循环代码：

var data1 = [5, 8, 2, 5, 7, 4, 1, 2, 30, 20, 50, 30, 150, 130, 70, 50, 20, 47, 32, 18, 20, 15, 16, 8];
var data2 = [9, 15, 3, 4, 1, 1, 0, 0, 60, 75, 112, 190, 267, 365, 258, 164, 168, 190, 47, 16, 20, 18, 5, 8];
var data3 = [15, 18, 12, 5, 7, 4, 1, 2, 130, 20, 150, 130, 150, 130, 70, 50, 20, 47, 32, 18, 20, 15, 16, 8];
var data4 = [19, 15, 13, 4, 11, 11, 0, 0, 60, 175, 112, 190, 267, 365, 258, 164, 168, 190, 47, 16, 20, 18, 15, 18];

var dataSet = [data1, data2, data3, data4];
var dataIter = 0;

$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
            load: function() {
                var series = this.series[0];
                setInterval(function() {
                    if (dataIter >= dataSet.length) dataIter = 0;
                    series.setData(dataSet[dataIter], true);
                    $("#dayLabel").text("Day - " +dataIter.toString());
                    dataIter += 1;
                }, 1500);
            }
        }
        },
        xAxis: {
            categories: ['0000', '0100', '0200', '0300', '0400', '0500', '0600', '0700', '0800', '0900', '1000', '1100', '1200', '1300', '1400', '1500', '1600', '1700', '1800', '1900', '2000', '2100', '2200', '2300'],
            labels: {
                rotation: 90
            }
        },
        yAxis: {
            min: 0,
            max: 500
        },
        series: [{
            data: []}]
    });

});