10

1 日のデータの変化をリアルタイムで示すグラフを描く必要があります。Google Charts Playgroundで遊んで視覚化する方法を確認しましたが、X 軸を固定するために hAxis.viewWindow.max オプションを設定できませんでした。

テストに使用したコードは次のとおりです。

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();

  data.addColumn('timeofday', 'x');
  data.addColumn('number', 'S0');
  data.addColumn('number', 'S1');
  data.addColumn('number', 'S2');

  data.addRows([
    [[0,0,0,0],   1,       1,           0.5],
    [[1,0,0,0],   2,       0.5,         1],
    [[2,0,0,0],   4,       1,           0.5],
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10},
                  hAxis: {maxValue: [23,59,59,0], minValue:[0,0,0,0], viewWindow:{max: [23, 59, 59, 0]}}}
          );
    }

ドキュメントでは、hAxis.viewWindow.max が数値を受け取ると主張していますが、「timeofday」タイプを数値として表す方法が見つかりませんでした。それを使用すると、X 軸は午前 0 時から午前 2 時まで移動しますが、軸が深夜まで移動する必要がありました。

同じ問題で、列タイプとして「datetime」を使用してみました。

以下のサンプルは、数値を使用して、意図したとおりに機能し、ポイントがある場所に線を描画しますが、最大値までグリッドを拡張します。

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();

  data.addColumn('number', 'x');
  data.addColumn('number', 'S0');
  data.addColumn('number', 'S1');
  data.addColumn('number', 'S2');

  data.addRows([
    [0,   1,       1,           0.5],
    [1,   2,       0.5,         1],
    [2,   4,       1,           0.5],
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10},
                  hAxis: {maxValue: 23, minValue:0, viewWindow:{max: 23}}}
          );
}

</p>

4

1 に答える 1

5

X軸は、最終的に最大値になります（または、同じ場合は閉じます-このように）。例えば

の場合には：

data.addRows([
    [[0,0,0,0],   1,       1,           0.5],
    [[1,0,0,0],   2,       0.5,         1],
  ]);

x軸は1:00に終了します

の場合には：

 data.addRows([
    [[0,0,0,0],   1,       1,           0.5],
    [[1,0,0,0],   2,       0.5,         1],
    [[23,59,59,0],   4,       1,           0.5],
  ]);

23:59:59に終了し、最後のx軸ラベルとして22:00が表示されます。

これは、hAxisでmaxとして定義した値に関係なく、グラフはdataRows（実際には最後に追加された行）にある最大の「timeofday」値まで実行されることを意味します。

于 2012-06-18T22:35:19.473 に答える