谷歌图表中注释的不同颜色 [英] Different colors for annotations in google charts

问题描述

我有两种类型的注释，一种有链接，而另一种则没有。我想用不同的颜色为它们着色。是否可能？

type 1是 -

{
v：'sample'，
Link：'some link
}

type 2 is -

{
v：'sample'，
}

其他的一些颜色和type2，是否有可能？

解决方案

您可以为整个图表设置样式注释，

或为每个系列单独

请参阅以下工作片段，

fontSize 对于所有注释

设置为 10 ，那么单个系列的颜色会改变

< script>< / div>< / script> / b>



















p>为单个系列中的注释提供不同的颜色，

需要在'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>< / div>< / script> / pre>

I have two types of annotations, one has links and other doesn't. I want to color them both in different colors. Is it possible?

type 1 is -
{ v: 'sample', Link: 'some link }

type 2 is -

{ v: 'sample', }

I want to color type1 in some color and type2 in other, is it possible ?

解决方案

you can style the annotations for the overall chart,
or for each series individually

see following working snippet,
the fontSize is set to 10 for all annotations
then the colors are changed for the individual series

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>

EDIT

to have different colors for annotations in a single series,
need to change color manually when the 'ready' event fires

see following working snippet...

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>

这篇关于谷歌图表中注释的不同颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！