Диаграммы Google Timeline, похоже, предлагают раскрашивать отдельные блоки на временной шкале в документации: https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#ControllingColors
Но, похоже, проблема в том, что две полосы "перекрываются" на одной строке, как вы можете видеть в этой скрипке: http://jsfiddle.net/7A88H/21/
Вот key code:
dataTable.addRows([
[ 'red/green/blue', 'NAME OF BAR (should be RED) (ff0000)', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
[ 'red/green/blue', 'NAME OF BAR (should be GREEN) (00ff00)', new Date(1796, 2, 3), new Date(1801, 2, 3) ],
[ 'red/green/blue', 'NAME OF BAR (should be BLUE) (0000ff)', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]);
var options = {
colors: ['#ff0000', '#00ff00', '#0000ff'],
};
Я попытался сыграть с принятым ответом из этого вопроса, добавив 5 столбцов (цвет) в мои строки данных: API графиков Google: добавьте пустую строку на шкалу времени?
В частности, вот функция, которую я думал, что могу уклониться от сборки моего взлома:
(function(){ //anonymous self calling function to prevent variable name conficts
var el=container.getElementsByTagName("rect"); //get all the descendant rect element inside the container
var width=100000000; //set a large initial value to width
var elToRem=[]; //element would be added to this array for removal
for(var i=0;i<el.length;i++){ //looping over all the rect element of container
var cwidth=parseInt(el[i].getAttribute("width"));//getting the width of ith element
if(cwidth<width){ //if current element width is less than previous width then this is min. width and ith element should be removed
elToRem=[el[i]];
width=cwidth; //setting the width with min width
}
else if(cwidth==width){ //if current element width is equal to previous width then more that one element would be removed
elToRem.push(el[i]);
}
}
for(var i=0;i<elToRem.length;i++)
elToRem[i].setAttribute("fill","none"); //make invisible all the rect element which has minimum width
})();
Надежда состояла в том, чтобы захватить каждую rect
(пропуская ограничивающие) и заполнить их (с помощью третьего цикла в конце) с их соответствующими цветами, но я не мог понять, как получить их связанный цвет ( который был в объектах строки) из самих объектов rect
.