web-dev-qa-db-ja.com

Google Chartsはデュアルy軸（v軸）をサポートできますか？

Flot チャートAPIは、 この例 で示されるように、デュアルv軸スケールをサポートします。

Google Chartを使用しています-これはGoogleでも可能ですか？例とドキュメントを確認しましたが、2軸チャートをサポートしていることを示す例や参照が見つかりません。

chartsvisualizationgoogle-visualization
41
Kevin

これを理解するには少し時間がかかりましたが、Google ChartdoesはデュアルY軸（v軸）をサポートしています。 HTMLインターフェイスではなくJavascript APIを使用したい。

この例はここでテストできます： http://code.google.com/apis/ajax/playground/?type=visualization#line_chart

そのすべてのコードを、2つの異なるY軸スケールを持つ方法を示す次のコードに置き換えます。

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'Cats');
  data.addColumn('number', 'Blanket 1');
  data.addColumn('number', 'Blanket 2');
  data.addRow(["A", 1, 1, 0.5]);
  data.addRow(["B", 2, 0.5, 1]);
  data.addRow(["C", 4, 1, 0.5]);
  data.addRow(["D", 8, 0.5, 1]);
  data.addRow(["E", 7, 1, 0.5]);
  data.addRow(["F", 7, 0.5, 1]);
  data.addRow(["G", 8, 1, 0.5]);
  data.addRow(["H", 4, 0.5, 1]);
  data.addRow(["I", 2, 1, 0.5]);
  data.addRow(["J", 3.5, 0.5, 1]);
  data.addRow(["K", 3, 1, 0.5]);
  data.addRow(["L", 3.5, 0.5, 1]);
  data.addRow(["M", 1, 1, 0.5]);
  data.addRow(["N", 1, 0.5, 1]);


  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function", width: 500, height: 400,
    vAxes: {0: {logScale: false},
            1: {logScale: false, maxValue: 2}},
    series:{
       0:{targetAxisIndex:0},
       1:{targetAxisIndex:1},
       2:{targetAxisIndex:1}}}
          );
}

maxValue: 2をコードに追加し、その軸にシリーズ1と2を設定すると、2番目の軸で適切に機能します。

96
QLeap

非JavaScriptソリューション

同じX軸（水平）を共有し、Y軸（垂直）の値（およびスケール）が異なるシリーズを探していると仮定すると、次のようにJavaScriptに頼ることなくこれを行うことができます。

  1. 挿入を選択|メニューからグラフ。
  2. グラフをダブルクリックし、グラフエディターで[グラフの種類]を選択します。折れ線グラフ。
  3. [データ範囲]ボックスのグリッドアイコンをクリックして、データ範囲ダイアログを表示します。
  4. Y軸の線に関心のあるデータを含むワークシートをクリックし、左上から右下に向かって強調表示して、すべてのY軸の線をカバーします。後で列を整理できます。
  5. [OK]をクリックすると、シリーズのコレクションが抽出されます。各シリーズの「ドットメニュー」を使用して、興味のないものを削除します。
  6. [X軸]ボックスのグリッドアイコンをクリックして、データ範囲ダイアログをもう一度取得します。
  7. X軸の線について関心のあるデータを含むワークシートをクリックし、上から下に強調表示します。
  8. [OK]をクリックすると、X軸が塗りつぶされ、両方のY軸線が同じ左軸ラベルを共有していることがわかります。
  9. 正しい軸ラベルを使用する線をクリックし、チャートエディターダイアログの[軸]ボックスを使用して[右軸]を選択します。

これで、グラフの他のさまざまなプロパティを編集して、プレゼンテーションの観点から見た目が見えるようにすることができます。

0
Gary Rowe