Question

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

该图表有三个不同的系列低，高，多，一个虚线应该从那里开始＃＆＃34;低＆＃34;值为＆＃34;多个＆＃34;值。 X轴应该具有PC＃1，PC＃2，PC＃3等Ticks。此外，每个点的值应该在图形的右侧，而不是工具提示。图表应该有三个图例，因为我们有三个系列＆＃34; Low＆＃34;，＆＃34; High＆＃34;，＆＃34; Multiple＆＃34;。

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>

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

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

仅使用 - >＆gt; annotations.stem.length

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

请参阅以下工作代码段...

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

当就绪事件触发时，找到注释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'事件触发时，会为每个'x'元素计算新的text位置

然后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>

Answer 2

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.

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

2 个答案: