如何使特定 google 个图表元素背景透明

Question

我必须创建一个 google 面积图，其中有一条线带有背景填充，但也有额外的线覆盖它，没有背景填充。我不知道该怎么做，希望这里有人知道。在下面的示例图像中，蓝色虚线是我试图弄清楚如何创建的那些。

Answer 1

您可以使用 ComboChart，
具有线系列和面积系列。

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Area', 'Line 0', 'Line 1', 'Line 2', 'Line 3'],
    ['Apr', 70000, 18000, 42000, 80000, 118000],
    ['May', 90000, 18000, 42000, 80000, 118000],
    ['Jun', 100000, 18000, 42000, 80000, 118000],
    ['Jul', 75000, 18000, 42000, 80000, 118000],
    ['Aug', 60000, 18000, 42000, 80000, 118000],
    ['Sep', 20000, 18000, 42000, 80000, 118000]
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 48,
      left: 72,
      right: 16,
      bottom: 60
    },
    height: '100%',
    width: '100%',
    seriesType: 'line',
    series: {0: {type: 'area'}},
    colors: ['orange', 'blue', 'blue', 'blue', 'blue']
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart'));

  drawChart();
  window.addEventListener('resize', drawChart, false);
  function drawChart() {
    chart.draw(data, options);
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
}

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

如何使特定 google 个图表元素背景透明

How to make specific google chart elements background transparent

charts

google-visualization