Couleur De Fond Du Graphique De Google
j'utilise l'api javascript pour concevoir un graphique google. Je veux changer le contexte de la zone où les données sont tracées. Pour une raison que lorsque j'ai mis les options d'arrière-plan comme ceci:
chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })
il change le fond de la carte entière et non la zone où les données sont tracées. Des idées sur la façon de changer seulement l'arrière-plan de la zone tracée? Merci
6 réponses
passer les options comme ceci
var options = {
title: 'title',
width: 310,
height: 260,
backgroundColor: '#E4E4E4',
is3D: true
};
ajouter à vos options:
'chartArea': {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
}
Avez-vous essayé d'utiliser backgroundcolor.stroke et backgroundcolor.strokewidth?
la bonne réponse est que cela dépend si C'est classic Google Charts ou matériel Google Charts. Si vous utilisez la version classique des cartes Google, plusieurs des suggestions ci-dessus fonctionnent. Cependant, si vous utilisez des cartes Google plus récentes, vous devez spécifier les options différemment, ou les convertir (voir google.charts.Bar.convertOptions(options) ci-dessous). En plus de cela dans le cas d'œuvres graphiques si vous spécifiez une opacité pour l'ensemble du graphique, l'opacité (uniquement) ne s'appliquent pas pour la zone de graphique. Donc, vous devez explicitement spécifiez la couleur de l'opacité de la zone de graphique, et même pour la même combinaison de couleurs.
en général: la version matérielle de Google Charts manque de certaines des caractéristiques de ce que le Classic A (étiquettes axiales inclinées, lignes de tendance, coloriage colonne personnalisé, Combo charts pour n'en nommer que quelques-uns), et vice versa: le nombre formating et le dual (triple, quadruple,...) axes ne sont supportés que par la version matérielle.
dans le cas où une fonctionnalité est supportée à la fois par le graphique Matériel nécessite parfois un format différent pour les options.
<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));
}
Violon démo: https://jsfiddle.net/csabatoth/v3h9ycd4/2/
il est plus facile d'utiliser les options.
drawChart() {
// Standard google charts functionality is available as GoogleCharts.api after load
const data = GoogleCharts.api.visualization.arrayToDataTable([
['Chart thing', 'Chart amount'],
['Na Meta', 50],
['Abaixo da Meta', 22],
['Acima da Meta', 10],
['Refugos', 15]
]);
let options = {
backgroundColor: {
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
},
},
};
const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
chart.draw(data, options);
}
j'utilise du polymère c'est pourquoi j'utilise ceci.$.cart1, mais vous pouvez utiliser selectedbyid, pas de problème.
il suffit d'ajouter l'option background
backgroundColor: {
fill:'red'
},
voici le violon lien https://jsfiddle.net/amitjain/q3tazo7t/