谷歌图表，我想在图表中每个点的右侧写一些文字

Question

谷歌图表，我想在图表中某些点的右侧写一些文字。我该怎么做？

图表有三个不同的系列 Low、High、Multiple，应该有一条从“Low”值到“Multiple”值的虚线。 X 轴应该有 PC#1、PC#2、PC#3 等刻度。此外，每个点在图表中的右侧都应该有它的值，而不是作为工具提示。该图应该有三个图例，因为我们有三个系列“Low”、“High”、“Multiple”。

Please click on this image link to understand my requirement

Answer 1

I am able to draw the chart as per my requirement. Please see below fiddle
for your reference:
[Fiddlle link][1]
[1]: https://jsfiddle.net/sainirohit77/5xb68cfw/

The only problem which I can see would arise when the data points are very 
close to each other than the annotation text eg. 2.0x, 7.0x will overlap each 
other.

Answer 2

您可以使用 注释 将 text 放置在图表上的某个点旁边

注释使用数据列添加，直接跟在它应该代表的系列列之后

请参阅以下工作 sn-p...

google.charts.load('current', {
  callback: function () {
    drawVisualization();
    window.addEventListener('resize', drawVisualization, false);
  },
  packages:['corechart']
});
function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addRow([{v: 2, f: ''}, 0.8, '0.8x']);
  data.addRow([{v: 2, f: ''}, 7.4, '7.4x']);
  data.addRow([{v: 2, f: ''}, 12.2, '12.2x']);

  var container = document.getElementById('visualization');
  var chart = new google.visualization.ScatterChart(container);

  chart.draw(data, {
    hAxis: {
      ticks: [
        {v: 0, f: ''},
        {v: 1, f: ''},
        {v: 2, f: ''},
        {v: 3, f: ''},
        {v: 4, f: ''}
      ]
    }
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization"></div>

---

默认情况下，注解放在点的上方，如上面的sn -p

并且没有可用于向左或向右移动注释的标准选项

仅向上或向下使用 --> annotations.stem.length

为了将文本设置到点的右边，
文字需要手动移动，
当'ready' 事件在图表上触发时

请参阅以下工作 sn-p...

注释将作为text元素添加到svg

当ready事件触发时，找到注解text元素，
并且 'x' 属性被更改，将 text 移动到 right

annotations.stem.length 用于将文本降低到与点相同的高度

google.charts.load('current', {
  callback: function () {
    drawVisualization();
    window.addEventListener('resize', drawVisualization, false);
  },
  packages:['corechart']
});
function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addRow([{v: 2, f: ''}, 0.8, '0.8x']);
  data.addRow([{v: 2, f: ''}, 7.4, '7.4x']);
  data.addRow([{v: 2, f: ''}, 12.2, '12.2x']);

  var container = document.getElementById('visualization');
  var chart = new google.visualization.ScatterChart(container);

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
      if (text.getAttribute('text-anchor') === 'middle') {
        text.setAttribute('x', parseFloat(text.getAttribute('x')) + 20);
      }
    });
  });

  chart.draw(data, {
    annotations: {
      stem: {
        length: -5
      }
    },
    hAxis: {
      ticks: [
        {v: 0, f: ''},
        {v: 1, f: ''},
        {v: 2, f: ''},
        {v: 3, f: ''},
        {v: 4, f: ''}
      ]
    }
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization"></div>

---

然而，你会在上面的 sn-p 中注意到，
当您将鼠标悬停在其中一个点上时，
图表会将文本设置回原来的'x' 位置

这可以通过使用以下选项关闭交互来防止...
enableInteractivity: false

但如果您想保持交互性，
每当发生事件时，您都需要重置 'x' 位置

这可以通过使用MutationObserver 来完成

请参阅以下工作 sn-p...

当'ready' 事件触发时，会为每个text 元素计算新的'x' 位置

然后MutationObserver用于重置位置，
任何时候发生交互...

google.charts.load('current', {
  callback: function () {
    drawVisualization();
    window.addEventListener('resize', drawVisualization, false);
  },
  packages:['corechart']
});
function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addRow([{v: 2, f: ''}, 0.8, '0.8x']);
  data.addRow([{v: 2, f: ''}, 7.4, '7.4x']);
  data.addRow([{v: 2, f: ''}, 12.2, '12.2x']);

  var container = document.getElementById('visualization');
  var chart = new google.visualization.ScatterChart(container);

  var annotations = {};
  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
      if (text.getAttribute('text-anchor') === 'middle') {
        annotations[index] = parseFloat(text.getAttribute('x')) + 20;
      }
    });

    var observer = new MutationObserver(function () {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
        if (text.getAttribute('text-anchor') === 'middle') {
          text.setAttribute('x', annotations[index]);
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  chart.draw(data, {
    annotations: {
      stem: {
        length: -5
      }
    },
    hAxis: {
      ticks: [
        {v: 0, f: ''},
        {v: 1, f: ''},
        {v: 2, f: ''},
        {v: 3, f: ''},
        {v: 4, f: ''}
      ]
    }
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization"></div>