谷歌图表中注释的不同颜色

Posted 2021-04-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了谷歌图表中注释的不同颜色相关的知识，希望对你有一定的参考价值。

我有两种类型的注释，一种有链接，另一种没有。我想用不同的颜色给它们上色。可能吗？

类型1是 - { v: 'sample', Link: 'some link }

第2类是 -

{ v: 'sample', }

我想在某种颜色中使用type1，在其他颜色中使用type2，这是可能的吗？

答案

您可以为整个图表设置注释样式，或单独为每个系列

请参阅以下工作代码段，对于所有注释，fontSize都设置为10 然后为各个系列改变颜色

google.charts.load('current', {
  callback: drawStacked,
  packages: ['corechart']
});

function drawStacked() {
  var data = new google.visualization.arrayToDataTable([
    ['Month', 'A', {role: 'annotation'}, 'B', {role: 'annotation'}],
    ['Aug', 3754, '3,754', 2089, '2,089'],
    ['Sept', 900, '900', 200, '200'],
    ['Oct', 2000, '2,000', 4900, '4,900'],
    ['Nov', 1700, '1,700', 2200, '2,200'],
    ['Dec', 2400, '2,400', 2089, '2,089']
  ]);

  var options = {
    annotations: {
      textStyle: {
        fontSize: 10
      }
    },
    series: {
      0: {
        annotations: {
          stem: {
            color: 'cyan',
            length: 5
          },
          textStyle: {
            color: 'cyan'
          }
        }
      },
      1: {
        annotations: {
          stem: {
            color: 'magenta',
            length: 10
          },
          textStyle: {
            color: 'magenta'
          }
        }
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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

以上是关于谷歌图表中注释的不同颜色的主要内容，如果未能解决你的问题，请参考以下文章

谷歌图表 - 获取行的颜色

谷歌图表vAxis勾选多种颜色和相应的浅色背景