Entonces, ¿no parece ser una forma de cambiar el color de fondo de un Gráfico de líneas de material de Google?
Lo he hecho bien en una tabla clásica, pero me pregunto si solo soy yo o es imposible para las tablas materiales.
JSFiddle: jsfiddle.net/698jukbb
Por favor, hágamelo saber de todos modos, puede hacer que funcione!
Muchas gracias,
Fred
Respuestas
0 para la respuesta № 1para material gráficos, necesidad de configurar la opción -> backgroundColor.fill
y / o -> chartArea.backgroundColor
backgroundColor: {
fill: "magenta"
},
chartArea: {
backgroundColor: "cyan"
},
Además, no debes olvidar convertir las opciones ...
google.charts.Line.convertOptions(materialOptions)
Ver siguiente fragmento de trabajo ...
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>