Google图表：如何更改注释图表中负值的颜色

Question

我目前使用GoogleCharts有一个很好的AnnotationChart，但我想改变负值的图形颜色。

我从这个链接获得了AreaChart / LineChart的解决方案： Google Chart : How to change color for negative values

但如果我在注释图表中应用相同的内容，我会得到如下图：Annotation Chart 我想要一个这样的图形但是在注释图表中：Expected chart

任何人都可以为此提供解决方案吗？

使用提供的解决方案后，我得到的图表如下：

我想要的只是一个包含AnnotationChart等缩放选项的图表。你还有其他办法吗？ 我尝试用AreaChart做到这一点。所以我能够在区域图的底部添加滚动缩放，但没有找到在顶部添加缩放按钮的方法。

Answer 1

对于注释图表，设置自定义颜色的唯一方法，
正在使用colors选项

这意味着如果你想要两种颜色，
您需要两个系列的数据（两个y轴数据表列）

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

＆＃13;

＆＃13;

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);
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;