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

Question

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

这就是我要的：

这就是我所拥有的

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

Answer 1

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

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。

Answer 2

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