代码之家  ›  专栏  ›  技术社区  ›  Anatoly

我可以用谷歌图表库制作一个在两行之间定义边界的面积图吗?

  •  1
  • Anatoly  · 技术社区  · 7 年前

    我需要实现下面的图表,现在我们正在使用谷歌图表库,我发现最接近这一点的图表是 Area Chart

    enter image description here

    非常感谢。

    1 回复  |  直到 7 年前
        1
  •  1
  •   WhiteHat    7 年前

    可以使用堆叠面积图,将底部堆栈颜色设置为透明。


    在这里,我画一条线,然后使用数据视图来绘制它周围的区域。

    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>