¿Cómo configuro el rango de color en Google Chart?

Question

He creado un ColumnChart y tiene dos barras. ¿Cómo puedo establecer diferentes colores en estas dos barras?

estoy actualmente sólo es capaz de establecer un color para ambas barras,

Esto es parte del código que utilizo:

var d = [['', ''], ['Bar 1', 100], ['Bar 2', 300]]; 
data = new google.visualization.arrayToDataTable(d);  

var option = { 
    title: 'Betalingsoppfølging', 
    width: '300', 
    height: '250', 
    min: '0', 
    legend: 'none', 
    colors: ['#b2cedc', '#7b7b7b','#e2e2e2', '#747c1f'] 
} 

wrap.setOptions(option); 
wrap.draw(data); 

La intención con colors: ['#b2cedc', '#7b7b7b','#b2cedc', '#7b7b7b'] es establecer color de inicio de fin de bar1 y bar 2. Pero todo lo que hago, es usar el primer color definido.

¿Y hay alguna manera de chagne el color de fondo a través de las opciones?

Código de ensayo para la herramienta de visualización

corte y pega esto en Code Playground.

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    var raw_data = [['Austria', 150000, 225000]]; 

    var years = [2003, 2004]; 

    data.addColumn('string', 'Year'); 
    for (var i = 0; i < raw_data.length; ++i) { 
    data.addColumn('number', raw_data[i][0]);  
    } 

    data.addRows(years.length); 

    for (var j = 0; j < years.length; ++j) {  
    data.setValue(j, 0, years[j].toString());  
    } 
    for (var i = 0; i < raw_data.length; ++i) { 
    for (var j = 1; j < raw_data[i].length; ++j) { 
     data.setValue(j-1, i+1, raw_data[i][j]);  
    } 
    } 

    // Create and draw the visualization. 
    new google.visualization.ColumnChart(document.getElementById('visualization')). 
     draw(data, 
      {title:"Color testing", 
      width:600, height:400, 
      hAxis: {title: "Year"}, 
      colors: ['#dedb70', '#747c1f','yellow', 'red'], 
      min: '0', 
      legend: 'none' 
      } 
    ); 
} 

Answer 1

No necesita repetir los códigos de color, repetirá el juego que le proporcione.

colors: ['#b2cedc', '#7b7b7b'] 

Usted también puede simplemente dejar que se utilice el valor por defecto, lo que dará un conjunto color distinto, si no eres exigente con los colores.

El color de fondo se ha cambiado por backgroundColor. Se necesita una cadena como 'rojo' o '# b2cedc'

Hay una buena tool con la que puedes jugar para probar tu código sobre la marcha. El código de color anterior insertado después de width:600, height:400, colores en cualquier otra línea como debería.

This documentation también podría ser útil.

Answer 2

El problema parece ser que solo está ingresando una entrada, Austria, con múltiples puntos de datos. colors establece el color para cada entrada, no el punto de datos de cada entrada. El gráfico no tiene una opción que pueda encontrar para colores de puntos de datos múltiples.

Para ver lo que quiero decir cambiar:

var raw_data = [['Austria', 150000, 225000]];

a

var raw_data = [['Austria', 150000, 225000],['Japan',100000,200000]];

Answer 3

código muy útil: lo encontré aquí. https://groups.google.com/forum/?fromgroups=#!topic/google-visualization-api/jCVmevbBT4Q

function drawVisualization() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Year'); 
     data.addColumn('number', 'Sales'); 
     data.addColumn('number', 'Expenses'); 
     data.addRows(4); 
     data.setValue(0, 0, '2004'); 
     data.setValue(0, 1, 1000); 
     data.setValue(0, 2, 400); 
     data.setValue(1, 0, '2005'); 
     data.setValue(1, 1, 1170); 
     data.setValue(1, 2, 460); 
     data.setValue(2, 0, '2006'); 
     data.setValue(2, 1, 660); 
     data.setValue(2, 2, 1120); 
     data.setValue(3, 0, '2007'); 
     data.setValue(3, 1, 1030); 
     data.setValue(3, 2, 540); 

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization')); 
    chart.draw(data, { width: 640, height: 480, title: 'Company Performance', 
        vAxis: { title: 'Year', titleTextStyle: { color: 'red'} }, 
        legend: 'none', colors: ['#cc00cc', '#ccffcc'] 
        }); 

    changeColors(); 

    } 

    function changeColors() { 
    var chartArea = document.getElementsByTagName('iframe')   [0].contentDocument.getElementById('chartArea'); 
     var nodes = chartArea.getElementsByTagName('rect'); 

     // finding all <rect> elements with #cc00cc fill color and replacing them with  'blue','red','green','blue' 
     for (var i = 0; i < nodes.length; i++) { 
    var node = nodes[i]; 
    if (node.getAttribute('fill') && node.getAttribute('fill') == '#cc00cc') { 
     switch (i % 4) { 
     case 0: 
      node.setAttribute('fill', 'blue'); 
      break; 
     case 1: 
      node.setAttribute('fill', 'red'); 
      break; 
     case 2: 
      node.setAttribute('fill', 'green'); 
      break; 
     case 3: 
      node.setAttribute('fill', 'red'); 
      break; 
     } 
     } 
    } 

    // finding all <rect> elements with #ccffcc fill color and replacing them with 'blue','red','green','blue' 
    for (var i = 0; i < nodes.length; i++) { 
    var node = nodes[i]; 
    if (node.getAttribute('fill') && node.getAttribute('fill') == '#ccffcc') { 
     switch (i % 4) { 
     case 0: 
      node.setAttribute('fill', 'blue'); 
      break; 
     case 1: 
      node.setAttribute('fill', 'red'); 
      break; 
     case 2: 
      node.setAttribute('fill', 'green'); 
      break; 
     case 3: 
      node.setAttribute('fill', 'red'); 
      break; 
     } 
     } 
     } 
    }