Google Chart: как изменить цвет для отрицательных значений в Annotation Chart - PullRequest
Новая
       10

Google Chart: как изменить цвет для отрицательных значений в Annotation Chart

0 голосов
/ 26 апреля 2018

В настоящее время у меня есть хорошая AnnotationChart с использованием GoogleCharts, но я хочу изменить цвет графика для отрицательных значений.

Я получил решение для AreaChart / LineChart по этой ссылке: Google Chart: как изменить цвет для отрицательных значений

Но если я применяю то же самое для Диаграммы аннотаций, я получаю график следующим образом: Диаграмма аннотаций И мне нужен график, подобный этому, но на диаграмме аннотации: Ожидаемый график

Может кто-нибудь дать решение для этого?

После использования предоставленного решения, я получаю диаграмму следующим образом: Chart with provided solution

Все, что мне нужно, - это график с такими параметрами масштабирования, как AnnotationChart. У вас есть другой способ сделать это? Я пытался сделать это с помощью AreaChart. Таким образом, я смог добавить масштаб прокрутки внизу диаграммы области, но не нашел способа добавить кнопки масштабирования сверху. enter image description here

1 Ответ

0 голосов
/ 26 апреля 2018

для диаграмм аннотаций, единственный способ установить пользовательские цвета,
использует опцию colors

, что означает, что если вы хотите два цвета,
вам понадобятся две серии данных (два столбца таблицы данных по оси Y)

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['annotationchart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Positive');
  data.addColumn('number', 'Negative');
  data.addRows([
    [new Date(2018, 3, 20), 10, null],
    [new Date(2018, 3, 21), 5, null],
    [new Date(2018, 3, 22), 0, 0],
    [new Date(2018, 3, 23), null, -5],
    [new Date(2018, 3, 24), null, -10],
    [new Date(2018, 3, 25), null, -5],
    [new Date(2018, 3, 26), 0, 0],
    [new Date(2018, 3, 27), 10, null],
    [new Date(2018, 3, 28), 5, null],
    [new Date(2018, 3, 29), 0, 0]
  ]);

  var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
  var options = {
    colors: ['#2196f3', '#f44336'],
    fill: 25,
    height: 400
  };
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...