El gráfico de barras de Google no puede cambiar el color de la barra individual

Creé un gráfico de barras de Google con la API de visualización de Google y estoy intentando agregar una columna que se usará para el estilo. Aquí está mi implementación a continuación usando .addcolumn () y luego agregando el campo de color a cada fila, sin embargo, cada barra sigue siendo el color azul predeterminado.

 // 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)); }      
   

No estoy seguro de dónde me estoy equivocando o si he entendido mal una parte de la documentación. Agradecería ayuda para cambiar el color de las barras en mi gráfico de barras, ¡gracias!

Un Rol de columna de estilo es la forma más fácil de colorear una barra individual.
Sin embargo, no funciona en Gráficos de materiales.

Para ver las opciones, vea gráficos de ejemplo …

Gráfico 1 = Gráfico de materiales
Gráfico 2 = Gráfico principal
Ambos construidos de la misma manera con varias configuraciones de estilo
Funciona en Core, no en Material

Si estás bien con cada barra siendo del mismo color …

Gráfico 3 = Gráfico de materiales
Utiliza la opción de configuración de colors para cambiar el color a rojo
Solo existe una serie, por lo que acepta solo un color

Si debe tener una Carta de materiales con colores separados para cada barra …

Gráfico 4 = Gráfico de materiales
Cada valor se agrega como una columna, en lugar de una fila, creando múltiples series
Utiliza la opción de configuración de colors para cambiar el color de cada barra
series opción de series también se puede usar aquí
Sin embargo, es mucho más difícil trabajar con él, observe la columna Spacer y la falta de tags 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; } 
  
1. Material Chart
2. Core Chart
3. Material Chart with colors: ['red']
4. Multi-Series Material Chart