13

Google Chartsを使用した基本的な Area Chart があります。グラフの各ポイントにツールチップを設定できますが、列内のすべてのポイントに単一のツールチップを表示する方法はありますか?

望ましい動作のスクリーンショットを次に示します。

ハイチャートによる列全体の 1 つのツールチップ

カーソルがグラフ上のポイント上にある場合、垂直線が描画され、その列のすべてのデータ (両方の線のデータ) を説明する 1 つのツールチップが表示されることがわかります。必要に応じて、ここで実際の例を参照してください。

これは Google チャートで達成できますか?

4

1 に答える 1

25

オプションに以下を追加するだけです (折れ線グラフの場合)。focusTarget: 'category'

以下に例を示します ( Google Playgroundを開いて、最後のオプションに上記の行を追加するだけです):

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
    ['A',   1,       1,           0.5],
    ['B',   2,       0.5,         1],
    ['C',   4,       1,           0.5],
    ['D',   8,       0.5,         1],
    ['E',   7,       1,           0.5],
    ['F',   7,       0.5,         1],
    ['G',   8,       1,           0.5],
    ['H',   4,       0.5,         1],
    ['I',   2,       1,           0.5],
    ['J',   3.5,     0.5,         1],
    ['K',   3,       1,           0.5],
    ['L',   3.5,     0.5,         1],
    ['M',   1,       1,           0.5],
    ['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,
                  vAxis: {maxValue: 10},
  // This line will make you select an entire row of data at a time
                  focusTarget: 'category'
                 }
          );
}

やさしい！詳細については、Google ドキュメントの focusTarget を参照してください。

もっと複雑なものが必要な場合は、ドメインの Data Roleをいじることができます

コードのサンプルビットを次に示します。

 google.load('visualization', '1.1', {'packages':['corechart']});

 google.setOnLoadCallback(drawChart_C6);

  function drawChart_C6() {
    var data = new google.visualization.DataTable();
    data.addColumn({type: 'string', role: 'domain'}, '2009 Quarter');
    data.addColumn('number', '2009 Sales');
    data.addColumn('number', '2009 Expenses');
    data.addColumn({type: 'string', role: 'domain'}, '2008 Quarter');
    data.addColumn('number', '2008 Sales');
    data.addColumn('number', '2008 Expenses');
    data.addRows([
      ['Q1 \'09', 1000, 400, 'Q1 \'08', 800, 300],
      ['Q2 \'09', 1170, 460, 'Q2 \'08', 750, 400],
      ['Q3 \'09', 660, 1120, 'Q3 \'08', 700, 540],
      ['Q4 \'09', 1030, 540, 'Q4 \'08', 820, 620]
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_C6'));
    chart.draw(data, {width: 400, height: 240, legend:'right', focusTarget: 'category'});
  }
于 2013-03-15T05:29:20.780 に答える