Google Temporale: Colore ogni barra singolarmente multipla su "stessa" linea

Question

I grafici di Google Timeline sembrano suggerire la colorazione di singoli blocchi della linea temporale per la documentazione: https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#ControllingColors

Ma ci sembra essere un problema quando due bar "sovrapposizione" sulla stessa linea, come si può vedere in questo violino: http://jsfiddle.net/7A88H/21/

Ecco il codice della chiave:

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'], 
}; 

ho provato a giocare con i th e accettato risposta da questa domanda con l'aggiunta di un 5 ° colonna (il colore) per le mie righe di dati: Google Charts API: Add Blank Row to Timeline?

In particolare, qui è la funzione che ho pensato che avrei potuto essere in grado di dirottare a costruire il mio trucco:

(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 
})(); 

La speranza era di afferrare ogni rect (saltando quelli delimitanti) e riempirli (con un terzo ciclo, alla fine) con i loro colori appropriati, ma non riuscivo a capire come ottenere il loro colore associato (che era in oggetti riga) dagli oggetti rect stessi.

Answer 1

Ci sono due modi per fare quello che vuoi, entrambi cambiano il colore dello sfondo in base al titolo che assegni alla riga. Con il codice corrente, quando si passa con il mouse su una delle righe, vengono visualizzate le informazioni su tale riga. Tuttavia, lasciando l'hover, ridisegna la casella rendendola molto più complicata. Ho fatto entrambe le cose per voi:

JSFiddle with Interactivity disabled (molto più semplice .. purtroppo ho fatto questo dopo che ho fatto quella complicata)

JSFiddle with Interactivity enabled and messy setTimeOut functions (non sempre funziona)

Ecco il codice quando l'interattività è disabilitato:

function drawChart() { 
 
    var container = document.getElementById('example5.4'); 
 
    var chart = new google.visualization.Timeline(container); 
 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn({ type: 'string', id: 'Role' }); 
 
    dataTable.addColumn({ type: 'string', id: 'Name' }); 
 
    dataTable.addColumn({ type: 'date', id: 'Start' }); 
 
    dataTable.addColumn({ type: 'date', id: 'End' }); 
 
    dataTable.addRows([ 
 
    [ 'red/green/blue', 'SHORT TEXT 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) ], 
 
    [ 'red/green/blue', 'NAME OF BAR (should be RED) (ff0000)', new Date(1789, 3, 29), new Date(1797, 2, 3) ]]); 
 

 
// dataTable.addRows([]); 
 

 
    var options = { 
 
    colors: ['#000', '#000', '#000'], // assign black background to each row 
 
    enableInteractivity: false //interactivity disabled 
 
    }; 
 

 
    chart.draw(dataTable, options); 
 
    var elements = document.getElementsByTagName("text"); 
 
    for(var el in elements) 
 
    { 
 
     if(typeof colorArray[elements[el].innerHTML] != "undefined") 
 
     { 
 
      setColor(elements[el],colorArray[elements[el].innerHTML]); 
 
     } 
 
    } 
 
} 
 
google.load('visualization', '1', {packages:['timeline'], callback: drawChart}); 
 

 
var colorArray = []; // format: colorArray["TEXT IN ROW"] = "COLOR" 
 
colorArray["NAME OF BAR (should be RED) (ff0000)"] = "#ff0000"; 
 
function setColor(elem,newColor) 
 
{ 
 
      var rect = elem.previousSibling; 
 
      var rTitle = rect.innerHTML; 
 
      rect.setAttribute("fill",newColor); 
 
}

NOTA: se la pagina è troppo stretto e testo in una fila si accorcia con i puntini di sospensione (...), questo m ethod fallisce perché è basato sul testo di ogni riga.

- Vecchio risposta senza trucco -

Dopo aver guardato in esso ulteriormente, sembra un modo semplice per risolvere questo problema è accorciando il testo della barra verde, perché anche quando si aggiunge un nuovo, riga separata , il testo per la casella verde non si adatta all'interno della casella.

Inoltre, sta elaborando i colori per linea, quindi la barra blu sta assumendo il colore verde poiché la barra verde viene spinta su una nuova riga. Aggiungerei qualsiasi riga che crei una nuova riga in un'istruzione separata solo per farlo mappare in modo più logico, anche se non fa differenza in che ordine sono gli array.

Here's the JSFiddle

Answer 2

penso che sarà necessario utilizzare le opzioni aggiuntive:

timeline: { groupByRowLabel: false } 

Perché, se si va al g-page: https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#BarsOneRow nei bar in una sezione Row mostrano come presidenti NON sovrapporre, quindi non puoi usarlo in questo caso, ma per il metodo che stai usando, le linee temporali si sovrappongono quindi devono essere nella loro stessa riga. Sarebbe probabilmente difficile leggere i titoli che si sovrappongono comunque.

Nota a margine: ho notato che cosa sta facendo Google. Assegna i colori da sinistra a destra, quindi avvolge. I titoli tuttavia non sono avvolgenti, vanno solo da sinistra a destra. Ecco un violino che ho fatto: https://jsfiddle.net/camp185/2Lopnnt3/2/ per mostrare come funziona il confezionamento dei colori ... ha aggiunto più colori.