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.