Google Material Line Chart - 背景颜色不可能与材料图表？

1 回答

• 1

  对于材料图表，需要设置选项 - > 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>
  

  回复于 2024-05-10T08:30:50+08:00