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

Question

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

类型1是 -

{
    v: 'sample',
    Link: 'some link
}

第2类是 -

{
    v: 'sample',
}

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

Answer 1

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

请参阅以下工作代码段， 对于所有注释，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>

编辑

在单个系列中为注释添加不同的颜色， 需要在'ready'事件触发时手动更改颜色

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

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

function drawStacked() {
  var data = new google.visualization.arrayToDataTable([
    ['Month', 'A', {role: 'annotation'}],
    ['Aug', 3754, '3,754'],
    ['Sept', {v: 900, p: {link: 'type A'}}, '900'],
    ['Oct', {v: 2000, p: {link: 'type B'}}, '2,000'],
    ['Nov', 1700, '1,700'],
    ['Dec', 2400, '2,400']
  ]);

  var options = {
    annotations: {
      textStyle: {
        color: '#000000',
        fontSize: 10
      }
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (text, index) {
      for (var i = 0; i < data.getNumberOfRows(); i++) {
        if ((text.getAttribute('text-anchor') === 'middle') && (text.innerHTML === data.getFormattedValue(i, 1))) {
          switch (data.getProperty(i, 1, 'link')) {
            case 'type A':
              text.setAttribute('fill', 'magenta');
              break;

            case 'type B':
              text.setAttribute('fill', 'cyan');
              break;
          }
        }
      }
    });
  });

  chart.draw(data, options);
}

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