How to make specific google chart elements background transparent

问题

I have to create a google area chart that has one line with the background fill but then also have additional lines that overlay it with no background fill. I can't figure out how to do this and am hopeful someone here knows. In the example image below the dashed blue lines are the ones I'm trying to figure out how to create.

回答1:

you can use a ComboChart,
with both line and area series.

see following working snippet...

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>

来源：https://stackoverflow.com/questions/57808092/how-to-make-specific-google-chart-elements-background-transparent

标签

charts

google-visualization