Google Chart, color diferente para cada barra

Question

tengo esta carta barra de Google:

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', ''); 
    data.addColumn('number', ''); 
    data.addRows(2); 
    data.setValue(0, 0, 'Value 1'); 
    data.setValue(0, 1, 250); 
    data.setValue(1, 0, 'Value 2'); 
    data.setValue(1, 1, 100); 

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, { 
     width: 400, 
     height: 175, 
     title: 'Total', 
     legend: 'none', 
    }); 
    } 

Todo funciona bien, pero la cosa es que ambas barras tienen el mismo color, y me gustaría ser capaz de tener diferentes colores para cada barra

¿Alguien puede ayudarme en esto?

Answer 1

Una forma hacky de hacer las cosas es ponerlas todas en la misma fila, y API asignaría colores distintos a esto. Por lo tanto, por su ejemplo

function drawChart(){ 

    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Value 1'); 
    data.addColumn('number', 'Value 2'); 
    data.addRows(2); 
    data.setValue(0, 0, 250); 
    data.setValue(0, 1, 100); 

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization')); 

    chart.draw(data, { 
     width: 600, 
     height: 175, 
     title: 'Total', 
     legend: 'none', 
    }); 
} 

Si necesita añadir sus propios colores esto en las opciones chart.draw como,

colors: ['red','yellow', 'blue'], 

Si hay demasiados bares sin embargo, esto puede ser una mala opción para que por favor vaya a

http://code.google.com/apis/chart/interactive/docs/reference.html#barformatter

Answer 2

Exactamente, hay que insertar los colores atribuir a la variabl opciones mi.

... 

var options = { 
    width: 600, 
    height: 175, 
    title: 'Total', 
    legend: 'none', 
    colors: ['red', 'green'] 
}; 

chart.draw(data, options); 
... 

Answer 3

Por favor, añadir esto en opciones:

colors:['red','#009900']

igual:

var options = { 
      title: 'Company Performance', 
      vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}, 
      colors:['red','#009900'] 
}; 

Answer 4

No estoy seguro de por qué nadie ha mencionado columnas de rol de estilo - Asumo que se agregaron después de la primera pregunta, pero para cualquiera que esté buscando esto ahora, una mejor manera es:

function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', ''); 
     data.addColumn('number', ''); 
     data.addColumn({ type: 'string', role: 'style' }); 

     data.addRows(2); 

     data.setValue(0, 0, 'Value 1'); 
     data.setValue(0, 1, 250); 
     data.setValue(0, 2, 'rgb(200, 20, 60)'); 
     data.setValue(1, 0, 'Value 2'); 
     data.setValue(1, 1, 100); 
     data.setValue(1, 2, 'rgb(20, 200, 60)'); 

     var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
     chart.draw(data, { 
       width: 400, 
       height: 175, 
       title: 'Total', 
       legend: 'none', 
     }); 
    } 

Puede configurar muchos otros estilos de CSS para hacer que sus gráficos sean REALMENTE feos.

https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

NOTA que no parecen apoyar RGBA (colores especificados) - usted tiene que ajustar la opacidad en el papel estilo.

Aquí es un violín:

http://jsfiddle.net/a1og7rq4/

Nota al margen: Si tiene varias series, entonces usted necesita una columna de papel de estilo después de cada columna de datos en serie.

Aquí hay otro violín mostrando que (con la opacidad, así): http://jsfiddle.net/v5hfdm6c/1

Aquí es la función modificada (el izquierdo no modificado anteriormente para mayor claridad)

function drawChart() { 
var data = new google.visualization.DataTable(); 
data.addColumn('string', ''); 
data.addColumn('number', ''); 
data.addColumn({ type: 'string', role: 'style' }); 
data.addColumn('number', ''); 
data.addColumn({ type: 'string', role: 'style' }); 

data.addRows(2); 

var i = 0; 
data.setValue(0, i++, 'Value 1'); 
data.setValue(0, i++, 200); 
data.setValue(0, i++, 'color:rgb(200, 20, 60); opacity:0.5'); 
data.setValue(0, i++, 250); 
data.setValue(0, i++, 'rgb(200, 20, 60)'); 

i = 0; 
data.setValue(1, i++, 'Value 2'); 
data.setValue(1, i++, 120); 
data.setValue(1, i++, 'color:rgb(20, 200, 60); opacity:0.5'); 
data.setValue(1, i++, 100); 
data.setValue(1, i++, 'rgb(20, 200, 60)'); 

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
chart.draw(data, { 
    width: 400, 
    height: 175, 
    title: 'Total', 
    legend: 'none', 
}); 

}

Answer 5

Aquí está mi respuesta.Se ocupa de la conversión de una matriz en dataTable

function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Season'); 
     data.addColumn('number', 'Deaths'); 
     data.addColumn({ 
      type: 'string', 
      role: 'style' 
     }); 

     var dataArray = new Array(); 
     dataArray[0] = ['Season 1', 1000, "#A0A0A0"] 
     dataArray[1] = ['Season 2', 1170, "#FF3344"] 
     dataArray[2] = ['Season 3', 660, "#BCBCBC"] 
     dataArray[3] = ['Season 4', 1248, "#B3B3B8"] 
     dataArray[4] = ['Season 5', 14353, "RED"]; 

     var charTitle = "Total deaths in Game of Thrones Series VS Screen Play Time"; 
     var noOfBars = dataArray.length; 

     data.addRows(noOfBars); 

     for (var row = 0; row < noOfBars; row++) { 
      var label=dataArray[row][0]; 
      var value=dataArray[row][1]; 
      var color=dataArray[row][2]; 
       data.setValue(row, 0, label); 
       data.setValue(row, 1, value); 
       data.setValue(row, 2, color); 
     } 



    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, { 
     width: 600, 
     height: 300, 
     title: charTitle, 
    }); 
} 

google.load("visualization", "1", { 
    packages: ["corechart"], 
    callback: function() { 
     drawChart(); 
    } 
}); 

Answer 6

Para aquellos que están usando el gráfico de sectores:

Añadir la slices

// Set chart options 
    var options = {'title':'How Much Pizza I Ate Last Night', 
        'width':400, 
        'height':300, 
        slices: { 
         0: { color: 'yellow' }, 
         1: { color: 'transparent' } 
         } 
        };