谷歌折线图中的可变背景颜色

Question

我正在寻找一个相当简单的谷歌LineChart，但我希望在图表区域有水平彩色条带，以指示低/中/高值。

查看图表API，它似乎不是直接的，因为chartArea.backgroundColor似乎是我可以设置的唯一值。

意识到这似乎是图表的限制，是否可以通过任何其他方法或javascript魔法重新创建此方法？

下面是我想要产生什么样的效果的例子。

提前致谢。

Answer 1

使用ComboChart

seriesType: 'area'

和isStacked: true

您可以根据需要定义多个范围

visibleInLegend: false隐藏了图例中的区域系列

然后您可以为要跟踪的系列设置自定义type:，
例如'line'，在以下工作代码段中......

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Time', type: 'number'},
        {label: 'Low', type: 'number'},
        {label: 'Avg', type: 'number'},
        {label: 'High', type: 'number'},
        {label: 'Dogs', type: 'number'}
      ],
      rows: [
        {c:[{v: 0}, {v: 25}, {v: 50}, {v: 25}, {v: 0}]},
        {c:[{v: 5}, {v: 25}, {v: 50}, {v: 25}, {v: 24}]},
        {c:[{v: 10}, {v: 25}, {v: 50}, {v: 25}, {v: 20}]},
        {c:[{v: 15}, {v: 25}, {v: 50}, {v: 25}, {v: 48}]},
        {c:[{v: 20}, {v: 25}, {v: 50}, {v: 25}, {v: 53}]},
        {c:[{v: 25}, {v: 25}, {v: 50}, {v: 25}, {v: 61}]},
        {c:[{v: 30}, {v: 25}, {v: 50}, {v: 25}, {v: 63}]},
        {c:[{v: 40}, {v: 25}, {v: 50}, {v: 25}, {v: 66}]},
        {c:[{v: 45}, {v: 25}, {v: 50}, {v: 25}, {v: 70}]},
        {c:[{v: 50}, {v: 25}, {v: 50}, {v: 25}, {v: 75}]},
        {c:[{v: 55}, {v: 25}, {v: 50}, {v: 25}, {v: 78}]},
        {c:[{v: 60}, {v: 25}, {v: 50}, {v: 25}, {v: 80}]},
        {c:[{v: 65}, {v: 25}, {v: 50}, {v: 25}, {v: 85}]},
        {c:[{v: 70}, {v: 25}, {v: 50}, {v: 25}, {v: 90}]}
      ]
    });

    var options = {
      chartArea: {
        width: '60%'
      },
      hAxis: {
        ticks: [0, 15, 30, 45, 60],
        title: 'Time'
      },
      isStacked: true,
      series: {
        // low
        0: {
          areaOpacity: 0.6,
          color: '#FFF59D',
          visibleInLegend: false
        },

        // avg
        1: {
          areaOpacity: 0.6,
          color: '#A5D6A7',
          visibleInLegend: false
        },

        // high
        2: {
          areaOpacity: 0.6,
          color: '#EF9A9A',
          visibleInLegend: false
        },

        // dogs
        3: {
          color: '#01579B',
          type: 'line'
        }
      },
      seriesType: 'area',
      title: 'Example',
      vAxis: {
        ti1cks: [0, 25, 50, 75, 100],
        title: 'Popularity'
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(dataTable, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>