web-dev-qa-db-ja.com

Googleチャート：折れ線グラフ+ポイント？

時間の値の変化を示す折れ線グラフを取得しました。それは機能しますが、ホバー時にツールチップを表示するpointsを追加できれば素晴らしいと思いました。このようなもの： enter image description hereしかしこれらの点のいずれかでツールチップを直接使用することはできません。

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, {});
javascriptgraphchartsgoogle-visualization
17
Andy

私の comment で述べたように、 annotation role を使用してこれを行うことができます。

元のコード：

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, {});
}

これが結果です：

Sample Annotation

チャートにポイントを追加するために asgallant's solution を追加するには、次のようにします。

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
        }
      }
    });
}

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

asgallant sample

16
jmac

質問を正しく読んだ場合は、各データポイントの線にポイントを表示し、これらのポイントにカーソルを合わせるとツールチップが表示されます。それが目的の場合、グラフはすでにこれらの両方を実行しています。デフォルトではサイズが0であるため、ポイントを表示できません。LineChartの「pointSize」オプションを設定して、ポイントを大きくします。

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

編集：

グラフの一部のポイントのみを強調するには、それらの値のみを含む新しいデータシリーズを追加する必要があります（このシリーズをDataTableに直接追加するか、何らかの方法で区別できる場合は、DataViewを使用してオンザフライで作成できます。他から強調したいポイント）。次に、グラフのseriesオプションを設定して、2番目の系列の線を非表示にし、凡例から2番目の系列を削除して、その点を大きくします（色を一致させる場合は、ここで色を設定することもできます） ）、 このような：

series: {
    0: {
        // set any applicable options on the first series
    },
    1: {
        // set the options on the second series
        lineWidth: 0,
        pointSize: 5,
        visibleInLegend: false
    }
}
13
asgallant