1

背景

我试图使用 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);
  }
}

x轴原来是[ 2:00 , 3:00, ...23:00, 0:00, 24 ]，也就是说我这次添加的点不对应类别[24 ]:0:00，其实对应的是不存在的categories[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, count] 这样的点，问题是我只有时间。即使我通过手动添加日期来构建数据

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

似乎可行。但是当它经过 24 小时后，样条曲线又回到了图表的左侧，因为这里的 x 轴值等于第一个值。在此处输入图像描述 BTW：如何让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
}

结果

尽管我指定了日期标签格式，但它似乎不受影响 尽管我指定了日期标签格式，但似乎没有受到影响 在此处输入图像描述 而且时间不正确。为什么？谢谢！ 在此处输入图像描述 仍然没有正确显示

4

2 回答 2

1

要仅在 X 轴上显示时间，您可以使用dateTimeLabelFormatsxaxis 的属性，并且可以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]。
希望我没有错过任何东西。

于 2012-11-28T10:50:22.800 回答
0

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

  • 一“天”的小时数据 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: []}]
    });

});
于 2012-11-29T17:43:23.577 回答