谷歌图表：如何更改注释图表中负值的颜色答案

【问题标题】：Google chart: how to change color for negative values in Annotation Chart谷歌图表：如何更改注释图表中负值的颜色
【发布时间】：2018-04-30 15:34:58
【问题描述】：

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

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

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

谁能给出解决方案？

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

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

【问题讨论】：

请添加您遇到问题的部分。尝试在此处添加内容而不是使用链接。因为该内容将来可能会被删除。

标签： javascript charts google-visualization

【解决方案1】：

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

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

请参阅以下工作 sn-p...

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>

【讨论】：

谢谢，它帮助了我。但我的 CSV 文件中没有 [date, 0, 0] 数据。所以图表看起来不像面积图那样连续。我无法使用 [date, 0, 0] 更改数据文件。您能为此提出任何解决方案吗？