我可以使用Google Charts库制作在两行之间定义界限的面积图吗？

Question

我需要实现以下图表，现在我们正在使用Google图表库，而我发现最接近的图表是Area Chart。面积图定义X轴和折线之间的区域的问题。就我而言，我需要在两行之间定义一个区域。可以使用Google图表库吗？

谢谢。

Answer 1

您可以使用堆积面积图，底部堆积的颜色设置为透明。

请参阅以下工作片段，
在这里，我画一条线，然后使用数据视图在其周围绘制区域。

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [1, 115],
    [2, 116],
    [3, 117],
    [4, 118],
    [5, 119],
    [6, 125],
    [7, 135],
    [8, 145],
    [9, 142],
    [10, 140],
    [11, 136],
    [12, 128],
    [13, 120],
    [14, 118],
    [15, 117],
    [16, 116],
    [17, 112],
    [18, 110],
    [19, 110],
    [20, 109],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      return dt.getValue(row, 1) - 60;
    },
    type: 'number',
    label: 'bottom'
  }, {
    calc: function (dt, row) {
      return dt.getValue(row, 1);
    },
    type: 'number',
    label: 'top'
  }]);

  var options = {
    colors: ['blue', 'transparent', 'blue'],
    lineWidth: 0,
    height: 400,
    isStacked: true,
    series: {
      0: {
        lineWidth: 1,
        pointSize: 4,
        type: 'line'
      },
      1: {
        enableInteractivity: false,
        visibleInLegend: false
      },
      2: {
        enableInteractivity: false,
        visibleInLegend: false
      }
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(view, options);
});

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