Google折线图去除背景色

Question

我无法在 SO 或 google 文档中找到此问题的答案。考虑到以下配置，我怎样才能删除这个超级烦人的背景？拼命试图在文档中找到正确的属性但没有成功：https://developers.google.com/chart/interactive/docs/gallery/linechart

  chart: {
    type: 'LINE',
    options: {
      width: '100%',
      colors: [colors.primary.fresh],
      // what property to target here? I've tried most...
    }
  }

Answer 1

areaOpacity: 0 是我认为您正在寻找的选项...

但是，此选项仅适用于面积图，不适用于折线图。
不确定它是否适合您。

请参阅下面的面积图，已删除填充颜色。

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [0,  4000],
    [1,  3800],
    [2,  5600],
    [3,  5800],
    [4,  5400],
    [5,  5000]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'AreaChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      areaOpacity: 0
    }
  });
  chart.draw();
});

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

请参阅下面的折线图，添加了填充颜色（不起作用）。

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [0,  4000],
    [1,  3800],
    [2,  5600],
    [3,  5800],
    [4,  5400],
    [5,  5000]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      areaOpacity: 0.3
    }
  });
  chart.draw();
});

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

仅供参考，请参见下面的面积图，添加了填充颜色。

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [0,  4000],
    [1,  3800],
    [2,  5600],
    [3,  5800],
    [4,  5400],
    [5,  5000]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'AreaChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      areaOpacity: 0.3
    }
  });
  chart.draw();
});

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

Google折线图去除背景色

Google line chart remove background color

charts

linechart

google-visualization