Highcharts Highchart在添加点时更新类别 背景

我试图用highchart动态显示与小时数相关的平均流量。也就是说，我希望它反复显示流量，比如，当时间到了下一个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);
  }
}

但这会使分类越来越大，这是不好的。 我怎样才能解决这个问题

另一个解决方案（也有一些问题） 通过使用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
}

/*更新部分*/
var时间=系列.points.length>0？series.points[series.points.length-1]。类别+3600:0；
//从1970-1-10:00开始**每次增加1小时**
如果（系列数据长度<24）{
series.addPoint（[时间，总和]，真，假）；
}否则{
series.addPoint（[时间，总和]，真，真）；
}
/*图表部分*/
xAxis：{
键入：“日期时间”，
dateTimeLabelFormat：{
第二个：'%H:%M'，
分钟：“%H:%M”，
小时：“%H:%M”，
日期：'%H:%M'，
周：“%H:%M”，
月份：'%H:%M'，
年份：'%H:%M'
}
间隔时间：3600
}

结果 虽然我指定了日期标签格式，但它似乎不受影响 时间不对。为什么？谢谢

---

仍然没有正确显示

要仅显示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.length-1]

找到系列中的最后一点
希望我没有错过任何东西。

要在X轴上仅显示时间，可以使用xaxis的

dateTimeLabelFormats

属性，也可以使用

tickInterval

在xaxis上设置tick interval

 //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.length-1]

找到系列中的最后一点
希望我没有错过任何东西。

现在，这可能不是您想要的，但我正在对您想要展示的内容进行一些假设：

• 一“天”0000-2300的小时数据
• 不介意只显示日期和时间
• 在给定的时间内，数据在“天”之间波动

我已经创建了一个图表的例子，它遍历了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: []}]
    });

});

---

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

• 一“天”0000-2300的小时数据
• 不介意只显示日期和时间
• 在给定的时间内，数据在“天”之间波动

我已经创建了一个图表的例子，它遍历了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: []}]
    });

});

---

谢谢你的帮助。我按照你的建议编辑了我的问题，仍然有问题~有一个bug，unix时间戳以毫秒为单位。我应该每次添加3600*1000。现在，通过将间隔设置为1*3600*1000，时间很好，但仍然无法擦除左侧的日期，如上图所示。嗯……它应该使用

dateTimeLabelFormat

属性集。但是我已经设置了属性

xAxis:{键入：'datetime'，dateTimeLabelFormat:{秒：'%H:%M'，分钟：'%H:%M'，小时：'%H:%M'，日：'%H:%M'，周：'%H:%M'，月：'%H:%M'，年：'%H:%M'}滴答间隔：1*3600*1000}

谢谢你的帮助。我按照你的建议编辑了我的问题，仍然有问题~有一个bug，unix时间戳是以毫秒为单位测量的。我应该每次添加3600*1000。现在将间隔设置为1*3600*1000很好，但仍然无法删除左侧的日期，如上图所示。嗯……应该使用

dateTimeLabelFormat

属性集。但是我已经设置了属性

xAxis:{type:'datetime'，dateTimeLabelFormat:{秒：'%H:%M'，分钟：'%H:%M'，小时：'%H:%M'，天：'%H:%M'，周：'%H:%M'，月：'%H:%M'