如何在 Google 图表中设置注释线的样式？

Posted 2023-05-07

【中文标题】如何在 Google 图表中设置注释线的样式？

【英文标题】：How to style annotation lines in Google Charts?

【发布时间】：2017-03-08 18:57:45

【问题描述】：

我正在使用Google Charts API 在LineChart（在特定点）上使用annotations 显示一条垂直线。

是否可以设置注释线的样式，使其更明显（更改其颜色/粗细，以防我添加一些垂直的gridlines 等）？

Desired output

我只对注释line样式感兴趣，而不是注释文本样式，正如this 问题中所问的那样。

我有以下代码：

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

您可以使用fiddle 中的代码。

【参考方案1】：

首先，推荐使用loader.js加载库（对比jsapi）

根据release notes...

通过jsapi 加载程序仍然可用的 Google Charts 版本不再持续更新。请从现在开始使用新的 gstatic 加载程序 (loader.js)。

这将改变load 语句，没有别的......

下一步，要更改注释线颜色，请使用以下配置选项...

annotations.stem.color

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

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

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

下面的工作 sn-p 使用注释线颜色， 找到注解<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>

【讨论】：

如何为多个注解设置不同的颜色

使用series 选项，如果您愿意添加问题，很乐意提供示例...