javascript - Google图表，我想在图表中每个点的右侧写一些文字

Question

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

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

Please click on this image link to understand my requirement

Answer 1

您可以使用注释 将文本放在图表上的点旁边

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

请参阅以下工作片段...

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>

---

默认情况下，注释位于点上方，如上面的代码片段所示

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

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

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

请参阅以下工作片段...

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

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

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>

---

但是，您会在上面的代码片段中注意到，
当您将鼠标悬停在其中一个点上时，
图表会将文本设置回原始 'x' 位置

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

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

这可以通过使用 MutationObserver 来完成

请参阅以下工作片段...

当 '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>