Javascript Girl
  1. Javascript Girl
  3. Google Bar Chart ne peut pas modifier la couleur de barre individuelle
Intereting Posts
Comment puis-je obtenir le texte d'un élément imbriqué en HTML pour l'automatisation à l'aide de Selenium ou Protractor? Existe-t-il un moyen de déterminer si la fenêtre du navigateur a été fermée? Différences dans les modèles regex entre JavaScript et Java? Rendant un espace réservé dynamique avec des angulaires Comment transmettre les données de formulaire à partir de l'interface angulaire ui bootstrap modal à la vue Texte d'échelle JavaScript à ajuster dans la division fixe HTML5 File API modifier fichier.nom Obtenez la valeur d'échelle d'un élément? Passer les données du formulaire HTML à la fonction Javascript Les vœux ne sont-ils jamais résolus? Est-il possible d'ajouter html dans un attribut de titre? Appelez une fonction lorsque l'onglet sélectionné dans la lumière de conception de matériau L'événement start / stop de YouTube intégré Comment puis-je vérifier si le capslock est activé sans attendre que l'utilisateur tape le caractère en utilisant JavaScript? Comment faire des appels AJAX synchrones dans Greasemonkey?

Google Bar Chart ne peut pas modifier la couleur de barre individuelle

J'ai créé un graphique à la barre de google à l'aide de l'API Google Visualization et j'essaie d'ajouter une colonne qui sera utilisée pour le style. Voici ma mise en œuvre ci-dessous en utilisant la colonne .add (), puis en ajoutant le champ de couleur à chaque ligne, mais chaque barre est toujours la couleur bleue par défaut. 

<script type="text/javascript"> // Runs onload to build the first default chart and load the bar chart package var jsonCoachCount; window.onload = function(){ jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"}, {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"Learn@UW"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]'); // Load the Visualization API and the barchart package. google.charts.load('current', {'packages': ['bar']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); }; function drawChart(){ var servicesData = new google.visualization.DataTable(); servicesData.addColumn('string', 'Service'); servicesData.addColumn('number', 'Number of Coaches'); servicesData.addColumn({type:'string', role:'style'}); for(i = 0; i < jsonCoachCount.length; i++){ tempArray =[]; tempArray.push(String (jsonCoachCount[i]['Name']), parseInt(jsonCoachCount[i]['Service_Count']), 'color:Red'); servicesData.addRow(tempArray); } var options = { backgroundColor: { fill: '#E8E4D8' }, legend: { position: 'none' }, titleTextStyle:{ bold: 'true' }, chart: { title: 'Coaches by Service', subtitle: 'Coaches by Services: From 2016-09-10 until Today' }, bar: { groupWidth: '60%' }, 'hAxis': { textStyle: { fontSize: 11 } } }; var chart = new google.charts.Bar(document.getElementById('servicesChart')); chart.draw(servicesData, google.charts.Bar.convertOptions(options)); } <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> 
 </body> </html>

Je ne suis pas sûr de savoir où je me trompe ou si j'ai mal compris une partie de la documentation. J'apprécierais l'aide pour changer la couleur des barres sur mon graphique à barres, merci!

    Un rôle de colonne de style est la manière la plus simple de colorier une barre individuelle.
    Cependant, cela ne semble pas fonctionner sur les graphiques de matériaux.
    (Versions éprouvées 'current' par '42' )

    Pour les options, voir exemples de graphiques …

    Graphique 1 = Tableau des matières
    Graphique 2 = Tableau de base
    Les deux ont été construits de la même manière avec différents paramètres de style
    Fonctionne sur Core, pas sur le matériel

    Si vous êtes bien, chaque barre étant de la même couleur …

    Graphique 3 = Tableau des matières
    Utilise l'option de configuration des colors pour changer la couleur en rouge
    Une seule série existe, donc n'accepte qu'une seule couleur

    Si vous devez avoir un tableau de matériaux avec des couleurs distinctes pour chaque barre …

    Graphique 4 = Tableau des matières
    Chaque valeur est ajoutée en tant que colonne, au lieu d'une ligne, créant plusieurs séries
    Utilise l'option de configuration des colors pour changer de couleur pour chaque barre
    series option series peut également être utilisée ici
    Cependant, beaucoup plus difficile à travailler, remarquez la colonne Spacer et le manque d'étiquettes hAxis … 

     google.charts.load('current', { callback: init, packages: ['bar', 'corechart'] }); function init() { var jsonCoachCount = JSON.parse('[{"Service_Count":"4","Name":"Other"}, {"Service_Count":"4","Name":"Campus Network"},{"Service_Count":"3","Name":"Learn@UW"},{"Service_Count":"2","Name":"Customer Service"},{"Service_Count":"1","Name":"Blackboard Collaborate"},{"Service_Count":"1","Name":"Office 365"},{"Service_Count":"1","Name":"Multiple"},{"Service_Count":"1","Name":"Office-ionado"},{"Service_Count":"1","Name":"Case Notes"},{"Service_Count":"1","Name":"ResNet"}]'); var options = { backgroundColor: { fill: '#E8E4D8' }, legend: { position: 'none' }, titleTextStyle:{ bold: 'true' }, chart: { title: 'Coaches by Service', subtitle: 'Coaches by Services: From 2016-09-10 until Today' }, bar: { groupWidth: '60%' }, hAxis: { textStyle: { fontSize: 11 } } }; drawChart(); drawSeriesChart(); function drawChart() { var servicesData = new google.visualization.DataTable(); servicesData.addColumn('string', 'Service'); servicesData.addColumn('number', 'Number of Coaches'); servicesData.addColumn({type:'string', role:'style'}); for (i = 0; i < jsonCoachCount.length; i++) { var tempArray =[]; var tempColor; switch (i) { case 0: tempColor = 'color:Red'; break; case 1: tempColor = 'orange'; break; case 2: tempColor = 'fill-color: gold;'; break; case 3: tempColor = 'bar {color: green;}'; break; case 4: tempColor = 'bar {fill-color: blue;}'; break; default: tempColor = 'bar {fill-color: cyan; stroke-color: black; stroke-width: 4;}'; } tempArray.push( String (jsonCoachCount[i]['Name']), parseInt(jsonCoachCount[i]['Service_Count']), tempColor ); servicesData.addRow(tempArray); } var chart = new google.charts.Bar(document.getElementById('servicesChart1')); chart.draw(servicesData, google.charts.Bar.convertOptions(options)); var chart = new google.visualization.ColumnChart(document.getElementById('servicesChart2')); chart.draw(servicesData, options); // only one series exists -- only one color will work options.colors = ['red']; var chart = new google.charts.Bar(document.getElementById('servicesChart3')); chart.draw(servicesData, google.charts.Bar.convertOptions(options)); } function drawSeriesChart() { var servicesData = new google.visualization.DataTable(); servicesData.addColumn('string', 'Service'); for (i = 0; i < jsonCoachCount.length; i++) { servicesData.addColumn('number', String (jsonCoachCount[i]['Name'])); servicesData.addColumn('number', 'Spacer'); } var tempArray = []; tempArray.push('Number of Coaches'); for (i = 0; i < jsonCoachCount.length; i++) { tempArray.push(parseInt(jsonCoachCount[i]['Service_Count'])); tempArray.push(null); } servicesData.addRow(tempArray); options.colors = [ 'deeppink', 'red', 'orange', 'gold', 'green', 'blue', 'indigo', 'purple', 'violet', 'pink' ]; var chart = new google.charts.Bar(document.getElementById('servicesChart4')); chart.draw(servicesData, google.charts.Bar.convertOptions(options)); } } 
     div { padding: 2px 0px 2px 0px; font-weight: bold; } .code { background-color: lightgray; font-family: Courier New; } 
     <script src="https://www.gstatic.com/charts/loader.js"></script> <div>1. Material Chart</div> <div id="servicesChart1"></div> <div>2. Core Chart</div> <div id="servicesChart2"></div> <div>3. Material Chart with <span class="code">colors: ['red']</span></div> <div id="servicesChart3"></div> <div>4. Multi-Series Material Chart</div> <div id="servicesChart4"></div>