examples - Personalice los colores de la barra en Google Gantt Charts

google charts tutorial español

Question

Esto debería ser simple. ¿Cómo puedo asignar mis propios colores a las barras en Google Gantt Charts ? El Gantt está ignorando mis colores y asigna automáticamente los colores azul, rojo y amarillo (en ese orden) a las barras y no puedo entender el problema. ¿Puede alguien señalar por favor si me falta algo aquí o no es compatible en absoluto en este momento?

Esto es lo que tengo:

function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn({ type: ''string'', id: ''task_id'' }, ''Task ID'');
      data.addColumn({ type: ''string'', id: ''task_name'' }, ''Task Name'');
      data.addColumn({ type: ''string'', id: ''resource'' }, ''Resource'');
      data.addColumn({ type: ''date'', id: ''start_date'' }, ''Start Date'');
      data.addColumn({ type: ''date'', id: ''end_date'' }, ''End Date'');
      data.addColumn({ type: ''number'', id: ''duration'' }, ''Duration'');
      data.addColumn({ type: ''number'', id: ''percent_complete'' }, ''Percent Complete'');
      data.addColumn({ type: ''string'', id: ''dependencies'' }, ''Dependencies'');

      data.addRows([
        [''Research'', ''Find sources'', null,
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        [''Write'', ''Write paper'', ''write'',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, ''Research,Outline''],
        [''Cite'', ''Create bibliography'', ''write'',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, ''Research''],
        [''Complete'', ''Hand in paper'', ''complete'',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, ''Cite,Write''],
        [''Outline'', ''Outline paper'', ''write'',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, ''Research'']
      ]);


      var colors = [];
      var colorMap = {
          write: ''#e63b6f'',
          complete: ''#19c362''
      }
      for (var i = 0; i < data.getNumberOfRows(); i++) {
          colors.push(colorMap[data.getValue(i, 2)]);
      }

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: ''#e64a19'',
              strokeWidth: 5
            }
          },
          colors: colors
        };

        var chart = new google.visualization.Gantt(document.getElementById(''chart_div''));
        chart.draw(data, options);
      }

Answer 1

Descubrí una forma estrafalaria de hacerlo. Básicamente, debe escuchar cada evento disparado por el gráfico y anularlos con una función que coloree el gráfico.

Answer 2

Esto es bastante viejo, pero por si alguien necesita hacer esto ... No es una solución súper elegante, pero funciona.

function changeColors() {
$("text[fill=''#5e97f6'']").attr(''fill'',"#0099D8"); // Left Text
$("rect[fill=''#5e97f6'']").attr(''fill'',"#0099D8"); // Full bar
$("path[fill=''#2a56c6'']").attr(''fill'', ''#006B99''); // Percentage completed
$("rect[fill=''#2a56c6'']").attr(''fill'', ''#0099D8''); // Hover Full Bar
$("path[fill=''#204195'']").attr(''fill'', ''#006B99''); // Hover Percentage

// Change Old red to new Red
$("text[fill=''#db4437'']").attr(''fill'',"#D41647");
$("rect[fill=''#db4437'']").attr(''fill'',"#D41647");
$("path[fill=''#a52714'']").attr(''fill'', ''#A21135'');
$("rect[fill=''#a52714'']").attr(''fill'', ''#D41647'');
$("path[fill=''#7c1d0f'']").attr(''fill'', ''#A21135'');

// Change Old Yellow to new Yellow
$("text[fill=''#f2a600'']").attr(''fill'',"#FCB813");
$("rect[fill=''#f2a600'']").attr(''fill'',"#FCB813");
$("path[fill=''#ee8100'']").attr(''fill'', ''#C98e03'');
$("rect[fill=''#ee8100'']").attr(''fill'', ''#FCB813'');
$("path[fill=''#b36100'']").attr(''fill'', ''#C98e03'');

}

... y luego de dibujar el gráfico, agregue un "listo" y estos otros oyentes de eventos para ejecutar changeColors cada vez que ocurra algo.

chart.draw(data, options);
google.visualization.events.addListener(chart, ''ready'', changeColors);
google.visualization.events.addListener(chart, ''onmouseover'', changeColors);
google.visualization.events.addListener(chart, ''onmouseout'', changeColors);
google.visualization.events.addListener(chart, ''select'', changeColors);
google.visualization.events.addListener(chart, ''error'', changeColors);
google.visualization.events.addListener(chart, ''click'', changeColors);
google.visualization.events.addListener(chart, ''animationfinish'', changeColors);

Cuestiones:

Parece que hay algunos cambios de colores en ciertas situaciones, mientras lo mueves alrededor.