visualization - 是否可以在Google图表中的两行之间填充区域？

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

这就是我要的:

这就是我所拥有的

关于如何做到这一点的任何想法(如果有的话!)？

最佳答案

通过使用堆叠的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。