Блог

Главная - Вопросы по программированию - Разные цвета для аннотаций в Google charts

Разные цвета для аннотаций в Google charts

#charts #google-visualization

#Диаграммы #google-визуализация

Вопрос:

У меня есть два типа аннотаций, у одного есть ссылки, а у другого нет. Я хочу раскрасить их в разные цвета. Возможно ли это?

тип 1 — это —
{
v: 'sample',
Link: 'some link
}

тип 2 — это —

{
v: 'sample',
}

Я хочу покрасить type1 в один цвет, а type2 в другой, возможно ли это?

Ответ №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') amp;amp; (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>

Комментарии:

1. надеюсь, это поможет, см. Параметры конфигурации для всех настроек, которые можно настроить…

2. проблема здесь в том, что у меня нет никаких рядов, кроме одной столбчатой диаграммы