20

値の経時変化を示す折れ線グラフがあります。動作しますが、ホバー時にツールチップを表示するポイントを追加できれば素晴らしいと思いました。このようなもの:ここに画像の説明を入力 しかし、これらのポイントの 1 つでツールチップを直接使用することはできません。

var data = google.visualization.arrayToDataTable([
    ['time', 'value'],
    ['12:00',   1],
    ['13:00',   5],
    ['14:00',   8],
    ['15:00',   12],
    ['16:00',   11],
    ['17:00',   15],

]);

new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {});
4

2 に答える 2

20

私のコメントで述べたように、注釈の役割を使用してこれを行うことができます。

元のコード:

var data = google.visualization.arrayToDataTable([
    ['time', 'value'],
    ['12:00',   1],
    ['13:00',   5],
    ['14:00',   8],
    ['15:00',   12],
    ['16:00',   11],
    ['17:00',   15],

]);

new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {});

2 つの列を追加する必要があります。1 つは注釈マーカー用、もう 1 つは注釈テキスト用です。例として、14:00 と 16:00 に 2 つのコメントが必要だとします。

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'time');
  data.addColumn('number', 'value');
  data.addColumn({type: 'string', role:'annotation'});
  data.addColumn({type: 'string', role:'annotationText'});
  data.addRows([
    ['12:00',   1, null, null],
    ['13:00',   5, null, null],
    ['14:00',   8, 'A', 'This is Point A'],
    ['15:00',   12, null, null],
    ['16:00',   11, 'B', 'This is Point B'],
    ['17:00',   15, null, null],
  ]);

  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {});
}

結果は次のとおりです。

サンプル注釈

チャートにポイントを追加するための asgallant のソリューションを追加するには、次のようにします。

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'time');
  data.addColumn('number', 'value');
  data.addColumn('number', 'points');
  data.addColumn({type: 'string', role:'annotation'});
  data.addColumn({type: 'string', role:'annotationText'});
  data.addRows([
    ['12:00',   1, null, null, null],
    ['13:00',   5, null, null, null],
    ['14:00',   8, 8, 'A', 'This is Point A'],
    ['15:00',   12, null, null, null],
    ['16:00',   11, 11, 'B', 'This is Point B'],
    ['17:00',   15, null, null, null],
  ]);

  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
      series: {
        0: {
          // set any applicable options on the first series
        },
        1: {
          // set the options on the second series
          lineWidth: 0,
          pointSize: 5,
          visibleInLegend: false
        }
      }
    });
}

その結果は次のとおりです。

アガラントサンプル

于 2013-07-25T23:42:52.500 に答える