Google Material 折线图 - material 图表无法使用背景颜色？

Question

所以似乎没有办法更改 google Material 折线图的背景颜色？

我在经典图表上做得很好，但我想知道是我自己还是 material 图表不可能吗？

JSFiddle： jsfiddle.net/698jukbb

无论如何请告诉我你能成功！

非常感谢，

弗雷德

Answer 1

对于material图表，需要设置选项 --> backgroundColor.fill

和/或 --> chartArea.backgroundColor

backgroundColor: {
  fill: 'magenta'
},
chartArea: {
  backgroundColor: 'cyan'
},

也不要忘记转换选项...

google.charts.Line.convertOptions(materialOptions)

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['line', 'corechart']
});

function drawChart() {
  var chartDiv = document.getElementById('chart_div');

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Month', 'Day', 'Hour','Min' );
  data.addColumn('number', "Battery Level");
  data.addColumn('number', "Solar Output");

  data.addRows([
    [new Date(2014, 1, 1, 8, 10),  -.5,  5.7],
    [new Date(2014, 1, 1, 8, 20),   .4,  8.7],
    [new Date(2014, 1, 1, 8 ,40),   .5,   12],
    [new Date(2014, 1, 1, 8 ,45),  2.9, 15.3],
    [new Date(2014, 1, 1, 8 ,60),  6.3, 18.6],
    [new Date(2014, 1, 1, 9 ,5),  9, 20.9],
    [new Date(2014, 1, 1, 9 ,12) , 10.6, 19.8],
    [new Date(2014, 1, 1, 9 ,18) , 10.3, 16.6],
    [new Date(2014, 1, 1, 9 ,28),  7.4, 13.3],
    [new Date(2014, 1, 1, 9 ,38),  4.4,  9.9],
    [new Date(2014, 1, 1, 9 ,48), 1.1,  6.6],
    [new Date(2014, 1, 1, 9 ,58), -.2,  4.5]
  ]);


  var materialOptions = {
    height: 300,
    chart: {
      title: 'Solar and Battery Overview',
    },
    backgroundColor: {
      fill: 'magenta'
    },
    chartArea: {
      backgroundColor: 'cyan'
    },
    series: {
      // Gives each series an axis name that matches the Y-axis below.
      0: {axis: 'Temps'},
      1: {axis: 'Daylight'}
    },
    axes: {
      // Adds labels to each axis; they don't have to match the axis names.
      y: {
        Temps: {label: 'Battery Level'},
        Daylight: {label: 'Solar Output'}
      }
    }

  };

  function drawMaterialChart() {
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
  }

  drawMaterialChart();
}

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

Google Material 折线图 - material 图表无法使用背景颜色？

Google Material Line Chart - Background Color impossible with material chart?

charts

linechart

google-visualization

background-color