Więc nie wydaje się, że istnieje sposób na zmianę koloru tła w Wykresie liniowym materiału Google?
Zrobiłem to dobrze na klasycznej mapie, ale zastanawiam się, czy to tylko ja, czy nie jest możliwe w przypadku wykresów materiałowych?
JSFiddle: jsfiddle.net/698jukbb
W każdym razie daj mi znać, że możesz to zrobić!
Wielkie dzięki,
Fred
Odpowiedzi:
0 dla odpowiedzi № 1dla materiał wykresy, należy ustawić opcję -> backgroundColor.fill
i / lub -> chartArea.backgroundColor
backgroundColor: {
fill: "magenta"
},
chartArea: {
backgroundColor: "cyan"
},
też nie wolno zapomnieć o konwersji opcji ...
google.charts.Line.convertOptions(materialOptions)
zobacz następujący fragment roboczy ...
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>