Comment définir une couleur spécifique pour une barre spécifique dans les graphiques Google?

Comment puis-je définir une couleur spécifique pour une barre spécifique dans les graphiques Google?Comment définir une couleur spécifique pour une barre spécifique dans les graphiques Google?

J'ai essayé d'appliquer ce style de coloration, mais rien ne semble fonctionner!

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<div id="barchart_material" style="width: 'auto'; height: 500px;"></div>

JavaScript

google.charts.load('current', {'packages':['bar']}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Statistics', 'Amount', { role: 'style' }], 
     ['Categories', 5, '#D9534F'], 
     ['Posts', 4, '#337AB7'], 
     ['Comments', 8, '#5CB85C'], 
     ['Users', 3, '#F0AD4E'], 
     ]); 

    var options = { 
     chart: { 
     title: 'Analysis', 
     subtitle: '', 
     }, 
    /* colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], // Another coloring method*/ 
     bars: 'horizontal' // Required for Material Bar Charts. 
    }; 

    var chart = new google.charts.Bar(document.getElementById('barchart_material')); 

    chart.draw(data, google.charts.Bar.convertOptions(options)); 
}

Je pense que cette liste contient la fonction de coloration, et ne doit pas être pris en charge au moment ... S'il vous plaît répondre si vous pensez que ce n'est pas vrai! En ce qui concerne les graphes "classiques", la solution fournie par @ عارف بن الأزرق travaille définitivement sur ces graphes. Pourtant, je ne m'intéresse jamais à eux!

Source

2017-09-02 Sky7ure

rôles de colonne ne sont pas supporté par _material_ charts, cochez [cette réponse] (https://stackoverflow.com/a/36452554/5090771) pour les options ... – WhiteHat

Ouais ... Merci. – Sky7ure

Ainsi, il est apparu - comme M. WhiteHat débarrassées - que le matériel Les graphiques ne supportent pas encore la majorité des options de personnalisation utiles ... Qui sont tous listés ici:

https://github.com/google/google-visualization-issues/issues/2143

Par conséquent, je suis obligé - comme M. عارف بن الأزرق suggéré - à utiliser les tableaux de base avec le thème « matériel » fourni dans la réponse à la question suivante:

Google Chart (Material) - Type Bar - Data in arrayToDataTable with role style KO?

Source

2017-09-02 14:50:40 Sky7ure

Après la fiddle provided by googl e
J'ai changé google.charts.load('current', {'packages':['corechart','bar']});
et
var chart = new google.visualization.BarChart(document.getElementById('barchart_material')); chart.draw(data, options); et travaille ici un working fiddle de votre code

Source

2017-09-02 11:31:04

Hmm ... En ce qui me concerne, vous avez utilisé un style de graphique à barres différent! Le code fonctionne en conséquence, mais sans l'apparence que je préfère avoir. Existe-t-il une autre méthode pour fournir des couleurs à ce graphique à barres? – Sky7ure

Ok vous avez besoin matrial graphique alors vous ne pouvez pas ajouter de style de rôle dans le graphique matrial la solution est d'utiliser corechart avec thème matrial, la solution ici https://stackoverflow.com/questions/40473417/google-chart-material-type-bar- data-in-arraytodatatable-with-role-style-ko –

Roger ça. Merci. – Sky7ure

Comment définir une couleur spécifique pour une barre spécifique dans les graphiques Google?

Répondre

Questions connexes