谷歌圖表：線圖+積分？

Question

我有線圖顯示價值隨時間的變化。 它有效，但我認為如果我能在懸停時添加顯示工具提示的點數會很棒。 像這樣的東西： 但我不能直接在其中一個點上使用工具提示。

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

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

您需要添加兩列 - 一列用於注釋標記，一列用於注釋文本。 假設您希望在14:00和16:00發表兩條評論，例如：

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

結果如下：

Answer 2

如果我正確地閱讀了您的問題，您希望每個數據點的線都出現點，並且將鼠標懸停在這些點上會產生工具提示。 如果這就是你所追求的，那么圖表已經完成了這兩件事，你只是看不到這些點，因為默認情況下它們的大小為0.在LineChart中設置“pointSize”選項以使點更大：

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

編輯：

要僅強調圖表中的某些點，您需要添加一個僅包含這些值的新數據系列（您可以將此系列直接添加到DataTable，或者如果您能以某種方式區分，則可以使用DataView動態創建它你想要從其他人強調的要點）。 然后你想設置圖表的series選項來隱藏第二個系列中的線條，從圖例中刪除第二個系列，並使其點更大（如果你想匹配顏色，你也可以在這里設置它的顏色），如下所示：

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