Estoy diseñando un gráfico de Google utilizando la API de JavaScript. Quiero cambiar el fondo del área donde se trazan los datos. Por alguna razón, cuando me puse opciones de fondo de este modo:Color de fondo del gráfico de Google
chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })
Cambia el fondo de toda la tabla y no en la zona donde se trazan los datos. ¿Alguna idea sobre cómo cambiar solo el fondo del área trazada? Gracias
¿Ha intentado usar backgroundcolor.stroke y backgroundcolor.strokewidth?
pasar las opciones de este tipo
var options = {
title: 'title',
width: 310,
height: 260,
backgroundColor: '#E4E4E4',
is3D: true
};
añadir esto a sus opciones:
'chartArea': {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
}
sólo tiene que añadir la opción de fondo
backgroundColor: {
fill:'red'
},
aquí está el enlace violín https://jsfiddle.net/amitjain/q3tazo7t/
Esto ya está incluido en otras respuestas. –
La respuesta correcta es que depende si se trata de Gráficos de Google clásicos o Gráficos de Google Materiales. Si usa la versión clásica de Google Charts, varias de las sugerencias anteriores funcionan. Sin embargo, si utiliza tablas de Google de tipos de material más nuevos, debe especificar las opciones de manera diferente o convertirlas (consulte google.charts.Bar.convertOptions(options) a continuación). Además de eso, en el caso de gráficos de materiales si especifica una opacidad para todo el gráfico, la opacidad (solo) no se aplicará al área del gráfico. Por lo tanto, debe especificar explícitamente el color con la opacidad para el área del gráfico, incluso para la misma combinación de colores.
En general, la versión material de Google Charts carece de algunas de las características que tiene el Classic (etiquetas de eje inclinado, líneas de tendencia, coloreado de columna personalizado, tablas Combo por nombrar algunas) y vica versa: el formato de número y el los ejes duales (triple, cuádruple, ...) solo son compatibles con la versión Material.
En caso de que una característica sea compatible con ambas, la tabla Material a veces requiere un formato diferente para las opciones.
<body>
<div id="classic_div"></div>
<div id="material_div"></div>
</body>
JS:
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2009', 1120, 580],
['2010', 1200, 500],
['2011', 1250, 490],
]);
var options = {
width: 1000,
height: 600,
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017'
},
// Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
// for that use fillOpacity versions
// Colors only the chart area, simple version
// chartArea: {
// backgroundColor: '#FF0000'
// },
// Colors only the chart area, with opacity
chartArea: {
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.1
},
},
// Colors the entire chart area, simple version
// backgroundColor: '#FF0000',
// Colors the entire chart area, with opacity
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.8
},
}
var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
classicChart.draw(data, options);
var materialChart = new google.charts.Bar(document.getElementById('material_div'));
materialChart.draw(data, google.charts.Bar.convertOptions(options));
}
violín de demostración: https://jsfiddle.net/csabatoth/v3h9ycd4/2/
justo lo que estaba buscando. Para tener el color de fondo solo en el área del gráfico. Gracias :) –
La opacidad de campo no funciona para backgroundColor – thermz
Funciona para fillOpacity: 0..1 –