如何在Google Charts中设置注释行的样式？

Question

我正在使用Google Charts API在LineChart(在特定点)显示垂直线annotations.

是否可以设置注释线的样式,使其更加可见(更改颜色/厚度,以防我添加一些垂直gridlines等)？

期望的输出

我只对注释行样式感兴趣,而不是注释文本样式,如此问题中所述.

我有以下代码:

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn('number', '');
  data.addColumn({
    type: 'boolean',
    role: 'certainty'
    });

  data.addRows([
    ["-6", null, 1, true],
    ["-5", null, 2, true],
    ["-4", null, 4, true],
    ["-3", null, 8, true],
    ["-2", null, 7, true],
    ["-1", null, 7, true],
    ["0", '', 8, true],
    ["1", null, 4, false],
    ["2", null, 2, false],
    ["3", null, 3, false],
    ["4", null, 3, false],
    ["5", null, 1, false],
    ["6", null, 1, false]
  ]);

  new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
      curveType: 'function',
      width: 500,
      height: 400,
      annotations: {
        style: 'line'
      }
  });
}

你可以玩这个小提琴中的代码.

Answer 1

首先,建议使用loader.js加载库(vs. jsapi)

根据发行说明 ......

通过jsapi加载程序保留的Google Charts版本不再一致地更新.loader.js从现在开始,请使用新的gstatic loader().

这将改变load声明,没有别的......

接下来,要更改注释线颜色,请使用以下配置选项...

annotations.stem.color

虽然线条粗细没有选项,但可以
在图表的'ready'事件触发 时手动更改

注释是使用<rect>元素 绘制的

只需要一种在dom中找到它的方法

以下工作代码段使用注释线颜色,
以查找注释<rect>并更改宽度

google.charts.load('current', {
  callback: drawVisualization,
  packages: ['corechart']
});

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn('number', '');
  data.addColumn({
    type: 'boolean',
    role: 'certainty'
  });

  data.addRows([
    ["-6", null, 1, true],
    ["-5", null, 2, true],
    ["-4", null, 4, true],
    ["-3", null, 8, true],
    ["-2", null, 7, true],
    ["-1", null, 7, true],
    ["0", '', 8, true],
    ["1", null, 4, false],
    ["2", null, 2, false],
    ["3", null, 3, false],
    ["4", null, 3, false],
    ["5", null, 1, false],
    ["6", null, 1, false]
  ]);

  var chartDiv = document.getElementById('visualization');
  var chart = new google.visualization.LineChart(chartDiv);

  var annotationColor = '#ff00ff';

  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('rect'), function(rect) {
      if (rect.getAttribute('fill') === annotationColor) {
        rect.setAttribute('width', '8');
      }
    });
  });

  chart.draw(data, {
    curveType: 'function',
    width: 500,
    height: 400,
    annotations: {
      stem: {
        color: annotationColor
      },
      style: 'line'
    }
  });
}

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