javascript - 谷歌图表 : how to change color for negative values in Annotation Chart

Question

我目前有一个使用 GoogleCharts 的漂亮的 AnnotationChart，但我想为负值更改图表的颜色。

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

但是如果我对注释图表应用相同的方法，我会得到这样的图表:Annotation Chart 我想要这样的图表，但在注释图表中:Expected chart

谁能给出解决方案？

使用提供的解决方案后，我得到这样的图表:

我想要的只是一个带有缩放选项的图表，例如 AnnotationChart。您还有其他方法可以做到这一点吗？ 我试图用 AreaChart 来做到这一点。所以我可以在面积图的底部添加滚动缩放，但没有找到在顶部添加缩放按钮的方法。

Answer 1

对于注解图表，只有这样才能设置自定义颜色，
正在使用 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>