1

バックグラウンド

ハイチャートを使用して動的に時間に対する平均トラフィックを表示しようとしていました。つまり、このように交通量を繰り返し表示して、次の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);

しかし、これによりカテゴリがどんどん大きくなります..これは悪いことです。どうすればこれを修正できますか。

別の解決策（いくつかの問題もあります）

x 軸のタイプとして datetime を使用すると、別の問題が発生します。私のデータ形式は次のとおりです

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

[time, count] のようなポイントを作成できます。問題は、時間しかないということです。のような日付を手動で追加してデータを構築しても

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
}

結果

日付ラベルのフォーマットは指定しても影響ないようです 日付ラベルの形式は指定しても影響ないようです ここに画像の説明を入力 。また、時刻が正しくありません。なんで？ありがとう！ ここに画像の説明を入力 まだ正しく表示されませんでした

4

2 に答える 2

1

X 軸に時間のみを表示するにはdateTimeLabelFormats、xaxis のプロパティを使用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」の時間を確認し、そのポイントを追加する前に、シリーズの最後のポイントと比較して日付部分を 1 つ増やすことができます。
でシリーズの最後のポイントを見つけることができますseries.points[series.points.length-1]。
何も見逃していないことを願っています。

于 2012-11-28T10:50:22.800 に答える
0

さて、これはあなたが探しているものではないかもしれませんが、私はあなたが見せたいものについていくつかの仮定をしています：

  • 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: []}]
    });

});
于 2012-11-29T17:43:23.577 に答える