Question

所以似乎没有办法改变谷歌物质折线图的背景颜色？

我在经典图表上做得很好，但我想知道它是否仅仅是我或者它对于重要图表是不可能的？

的jsfiddle： jsfiddle.net/698jukbb

请告诉我，无论如何你可以让它发挥作用！

非常感谢，

佛瑞德

Answer 1

对于材料图表，需要设置选项 - ＆gt; backgroundColor.fill

和/或 - ＆gt; 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 Line Chart - 背景颜色不可能与材料图表？

1 个答案: