如何使特定的Google图表元素背景透明 [英] How to make specific google chart elements background transparent

问题描述

我必须创建一个Google面积图，该图的背景填充线为一条线，但也有其他线覆盖背景填充线而没有背景填充线.我不知道该怎么做，希望这里的人知道.在下面的示例图像中，蓝色虚线是我试图找出创建方法的图像.

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.

推荐答案

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

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>

这篇关于如何使特定的Google图表元素背景透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！