Googleマテリアルラインチャート - マテリアルチャートでは背景色が不可能ですか？

Question

Googleマテリアルラインチャートの背景色を変更する方法はありませんか？

古典的なチャートでうまくやったことがありますが、それは私だけか、マテリアルチャートにとって不可能なのでしょうか？

JSFiddle： jsfiddle.net/698jukbb

あなたはそれを動作させることができ、私はとにかく教えてください！

材料チャートのおかげでたくさん、

フレッド

Answer 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>