Google Graphique Couleur de fond

Je suis en train de créer un graphique Google en utilisant l'API JavaScript. Je veux changer l'arrière-plan de la zone où les données sont tracées. Pour une raison quelconque quand je définir des options de fond comme ceci:Google Graphique Couleur de fond

chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })

Il change le fond de l'ensemble graphique 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

Source

2012-01-10 firebait

Avez-vous essayé d'utiliser backgroundcolor.stroke et backgroundcolor.strokewidth?

Voir Google Charts documentation.

Source

2012-05-10 15:29:03 andypotter

passer les options comme celui-ci

var options = { 
    title: 'title', 
    width: 310, 
    height: 260, 
    backgroundColor: '#E4E4E4', 
    is3D: true 
};

Source

2012-08-20 07:12:13

ajouter ceci à vos options:

'chartArea': { 
    'backgroundColor': { 
     'fill': '#F4F4F4', 
     'opacity': 100 
    }, 
}

Source

2013-01-31 16:27:38

L'opacité du champ ne fonctionne pas pour backgroundColor – thermz

Il travaille pour fillOpacity: 0..1 –

-3

ajouter simplement l'option d'arrière-plan

backgroundColor: { 
     fill:'red'  
     },

voici le lien violon https://jsfiddle.net/amitjain/q3tazo7t/

Source

2016-08-11 13:34:58

Ceci est déjà inclus dans d'autres réponses. –

La bonne réponse est que cela dépend si ce sont des graphiques Google classiques ou des graphiques Google. Si vous utilisez une version classique des graphiques Google, plusieurs des suggestions ci-dessus fonctionnent. Toutefois, si vous utilisez des graphiques Google de type plus récent, 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 de graphiques de matériaux si vous spécifiez une opacité pour l'ensemble du graphique, l'opacité (uniquement) ne s'appliquera pas à la zone de graphique. Vous devez donc spécifier explicitement la couleur avec l'opacité pour la zone de graphique, même pour la même combinaison de couleurs.

En général: la version matérielle de Google Maps manque certaines des fonctionnalités de la Classic (étiquettes d'axe inclinées, lignes de tendance, coloriage de colonne personnalisé, cartes Combo pour n'en nommer que quelques-unes) et vice versa: Les axes dual (triple, quadruple, ...) sont uniquement supportés avec la version Material.

Si une fonction est prise en charge à la fois par le diagramme Matériau, 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)); 
    }

Fiddle démonstration: https://jsfiddle.net/csabatoth/v3h9ycd4/2/

Source

2017-10-06 00:24:15

juste ce que je cherchais. Pour avoir la couleur d'arrière-plan uniquement dans la zone de graphique. Merci :) –

Google Graphique Couleur de fond

Répondre

Questions connexes