charts - column - haxis google chart

Google Charts-Cambiar el color de la barra individual

Question

Con el gráfico de barras de Google Charts, es posible cambiar el color de una barra. Por ejemplo, me gustaría hacer que los datos de 2006 sean rojos (otras barras son azules).

 function drawVisualization() {
            // Create and populate the data table.
            var data = new google.visualization.DataTable();
            data.addColumn(''string'', ''Year'');
            data.addColumn(''number'', ''Sales'');

            data.addRows(4);
            data.setValue(0, 0, ''2004'');
            data.setValue(0, 1, 1000);

            data.setValue(1, 0, ''2005'');
            data.setValue(1, 1, 1170);

  /* NEED TO MAKE THIS BAR RED? */
            data.setValue(2, 0, ''2006'');
            data.setValue(2, 1, 1400);

            data.setValue(3, 0, ''2007'');
            data.setValue(3, 1, 1030);


            chart = new google.visualization.BarChart(document.getElementById(''visualization''));
            chart.draw(data, {width: 400, height: 240, title: ''Company Performance'',
                              vAxis: {title: ''Year'', titleTextStyle: {color: ''red''}}
                             });
}

Answer 1

Aquí hay un ejemplo de código que cambia el color. Tenga en cuenta que la opción "colores" acepta una matriz de cadenas.

var options = {
      title: ''Company Performance'',
      hAxis: {title: ''Year'', titleTextStyle: {color: ''red''}},
      colors: [''red'',''green''],
      is3D:true
};

Answer 2

Como sugirió Naveen, debe agregar otra serie para hacer que use un color diferente, sin embargo, si agrega isStacked: true a sus opciones, dibujará barras una encima de la otra en lugar de una junto a la otra y no cambiará su estilo. Ancho o alineación, por lo que se ve bien. Prueba esto:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
            data.addColumn(''string'', ''Year'');
            data.addColumn(''number'', ''Sales'');
            data.addColumn(''number'', ''SalesMax'');

            data.addRows(4);
            data.setValue(0, 0, ''2004'');
            data.setValue(0, 1, 1000);
            data.setValue(0, 2, 0);

            data.setValue(1, 0, ''2005'');
            data.setValue(1, 1, 1170);
            data.setValue(1, 2, 0);

  /* NEED TO MAKE THIS BAR RED? */
            data.setValue(2, 0, ''2006'');
            data.setValue(2, 1, 0);
            data.setValue(2, 2, 1400);

            data.setValue(3, 0, ''2007'');
            data.setValue(3, 1, 1030);
            data.setValue(3, 2, 0);


            var chart = new google.visualization.BarChart(document.getElementById(''visualization''));
  chart.draw(data, {isStacked: true, width: 400, height: 240, title: ''Company Performance'',
                              vAxis: {title: ''Year'', titleTextStyle: {color: ''red''}},
                              series: [{color: ''blue'', visibleInLegend: true}, {color: ''red'', visibleInLegend: false}]
                             });
} ​

Answer 3

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

Puede agregar {role: ''style''} a su tabla de datos. Para todas las columnas que desee que tengan el mismo color, solo especifique un estilo vacío ''''. Luego, en la columna que desea que sea roja, simplemente puede especificar ''rojo'' o ''# ff0000'' o ''color: rojo'', etc.

// example from Google
var data = google.visualization.arrayToDataTable([
    [''Element'', ''Density'', { role: ''style'' }],
    [''Copper'', 8.94, ''#b87333''],            // RGB value
    [''Silver'', 10.49, ''silver''],            // English color name
    [''Gold'', 19.30, ''gold''],
    [''Platinum'', 21.45, ''color: #e5e4e2'' ], // CSS-style declaration
]);

Answer 4

Resuelvo este problema usando una técnica de estilo de rol ahora para gráficos que generan datos dinámicos. Usé una función aleatoria para generar color

    function random_color_part() {
return str_pad( dechex( mt_rand( 0, 255 ) ), 2, ''0'', STR_PAD_LEFT);
}

function random_color() {
return random_color_part() . random_color_part() . random_color_part();
}
then simply
$color=random_color();
print "[''$rows[1]'',$rows[2],''#$color''],/n";

Answer 5

Siempre puedes insertar una columna extra y así tendrá un color diferente. Eso es todo lo que se puede hacer, supongo.

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
            data.addColumn(''string'', ''Year'');
            data.addColumn(''number'', ''Sales'');
            data.addColumn(''number'', ''SalesMax'');

            data.addRows(4);
            data.setValue(0, 0, ''2004'');
            data.setValue(0, 1, 1000);
            data.setValue(0, 2, 0);

            data.setValue(1, 0, ''2005'');
            data.setValue(1, 1, 1170);
            data.setValue(1, 2, 0);

  /* NEED TO MAKE THIS BAR RED? */
            data.setValue(2, 0, ''2006'');
            data.setValue(2, 1, 0);
            data.setValue(2, 2, 1400);

            data.setValue(3, 0, ''2007'');
            data.setValue(3, 1, 1030);
            data.setValue(3, 2, 0);


            var chart = new google.visualization.BarChart(document.getElementById(''visualization''));
            chart.draw(data, {width: 400, height: 240, title: ''Company Performance'',
                              vAxis: {title: ''Year'', titleTextStyle: {color: ''red''}},
                              series: [{color: ''blue'', visibleInLegend: true}, {color: ''red'', visibleInLegend: false}]
                             });
} 

Answer 6

Serie Array de objetos, u objeto con objetos anidados.

Una matriz de objetos, cada uno describe el formato de la serie correspondiente en el gráfico. Para usar valores predeterminados para una serie, especifique un objeto vacío {}. Si no se especifica una serie o un valor, se utilizará el valor global. Cada objeto soporta las siguientes propiedades:

color - El color a utilizar para esta serie. Especifique una cadena de color HTML válida. targetAxisIndex: a qué eje asignar esta serie, donde 0 es el eje predeterminado y 1 es el eje opuesto. El valor predeterminado es 0; configúrelo en 1 para definir un gráfico en el que diferentes series se representen contra diferentes ejes. Al menos una serie debe asignarse al eje por defecto. Puede definir una escala diferente para diferentes ejes.

visibleInLegend : un valor booleano, donde verdadero significa que la serie debería tener una entrada de leyenda, y falso significa que no debería. El valor predeterminado es true. Puede especificar una matriz de objetos, cada uno de los cuales se aplica a la serie en el orden dado, o puede especificar un objeto en el que cada hijo tenga una tecla numérica que indique a qué serie se aplica. Por ejemplo, las dos declaraciones siguientes son idénticas, y declaran la primera serie como negra y ausente de la leyenda, y la cuarta como roja y ausente de la leyenda:

series: {0:{color: ''black'', visibleInLegend: false}, 3:{color: ''red'', visibleInLegend: false}}