是否可以填写谷歌图表中两行之间的区域？答案

【问题标题】：Is it possible to get a fill in the area between two lines in Google Charts?是否可以填写谷歌图表中两行之间的区域？
【发布时间】：2012-09-03 02:25:16
【问题描述】：

我在Google Charts API 中看不到任何示例，这些示例将演示如何在两个图表之间的区域中创建填充颜色。在我的例子中，这种填充颜色应该填充代表最坏结果和最佳结果之间差值的区域。

这就是我想要的：

这就是我所拥有的

关于如何做到这一点的任何想法（如果有的话！）？

【问题讨论】：

标签： visualization google-visualization

【解决方案1】：

通过使用堆叠的AreaChart 和一些创造性思维，我能够非常接近地重新创建您想要的图表。将以下代码插入Code Playground：

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['a',    'b',   'c',   'd'],
    ['1',    100,   10,    10],
    ['10',   250,   150,   50],
  ]);

  var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
  ac.draw(data, {
    isStacked: true,
    series: [{color: 'white', lineWidth: 0}, {color: 'purple'}, {color: 'purple', lineWidth: 0}],
    legend: {position: 'none'},
  });
}

关键是让底部/第一个系列的颜色与图表的背景相同，并且最后一个/顶部的系列没有线宽。这两者都由series 参数控制。问题是，由于系列是堆叠的，您必须减去较低系列的值才能得到正确的数字。例如，如果您希望最低线位于 250，中间/深紫色线位于 400，顶线位于 450，则必须使用值 250、150 和 50。

【讨论】：

太棒了！起初我没有阅读您的评论 - 只是潜入，直到我看到“isStacked：true” :) 我想要什么： function drawVisualization() { var data = google.visualization.arrayToDataTable([ ['a ', 'b', 'c', 'd'], ['1', 100, 0, 0], ['10', 150, 50, 50], ]); var ac = new google.visualization.AreaChart(document.getElementById('visualization')); ac.draw(data, { isStacked: true, series: [{color: 'white', lineWidth: 1}, {color: 'purple'}, {color: 'purple', lineWidth: 0}], 图例: {位置：'无'}，}）； }

【解决方案2】：

从未见过，但您也许可以使用“间隔”role 来做某事。

【讨论】：