Google Charts Timeline: Problem mit Farb- und Balkenbeschriftungen

Question

Ich habe ein Zeitdiagramm. Wenn ich nur 3 Spalten (Zeilenbezeichnung, Startdatum, Enddatum) in meiner Timeline habe und sie einfärbe, funktioniert alles perfekt. Ich habe jedoch eine andere Spalte (Balkenbeschriftung) zu meiner Zeitleiste hinzugefügt, und jetzt ist die Färbung völlig durcheinander. Kann jemand dieses Problem beheben? Wenn dies nicht der Fall ist, wird dieses Problem als Fehler angesehen.

Beispielcode-Schnipsel auf jsfiddle das Problem demonstriert: https://jsfiddle.net/9egybsro/

Ein Blick auf meine hartcodierte Farb Array:

var color = ['#FF9900', 
      '#FF9900', 
      '#FF9900', 
      '#FF9900', 
      '#FF9900', 
      '#FF9900', 
      '#FF9900', 
      '#FF9900', 
      '#FF9900', 
      '#FF9900', 
      '#868686', 
      '#FF9900', 
      '#FF9900' 
      ] 

Alle Bars mit Ausnahme der 3. bis letzten Takt sollte Orange gefärbt sein. Der 3. bis letzte Balken sollte grau sein. Wie gezeigt, wenn der Run-Button gedrückt wird, sind alle Balken orange gefärbt.

Answer 1

standardmäßig folgen die colors der Strichetiketten

timeline.colorByRowLabel setzen die Zeile Etiketten/Position colors Array zu verwenden

timeline: { 
    colorByRowLabel: true 
} 

Andernfalls verwenden, um eine eindeutige Beschriftung bar ...

var barLabel = []; 
for (var i = 0; i < startDate.length; ++i) { 
    barLabel.push("potato" + i); 
} 

siehe folgenden Arbeitsschnipsel ...

google.charts.load('current', { 
 
    'packages': ['timeline'] 
 
}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var container = document.getElementById("timeline"); 
 
    var chart = new google.visualization.Timeline(container); 
 
    var dataTable = new google.visualization.DataTable(); 
 

 
    dataTable.addColumn({ 
 
    type: 'string', 
 
    id: 'account_name' 
 
    }); 
 
    dataTable.addColumn({ 
 
    type: 'string', 
 
    id: 'bar_label' 
 
    }); 
 
    dataTable.addColumn({ 
 
    type: 'date', 
 
    id: 'Start' 
 
    }); 
 
    dataTable.addColumn({ 
 
    type: 'date', 
 
    id: 'End' 
 
    }); 
 

 
    var name = ['Russ Hanneman', 
 
    'Gavin Belson', 
 
    'Jack Barker', 
 
    'Peter Gregory', 
 
    'Jian Yang', 
 
    'Richard Hendrix', 
 
    'Dinesh Chugtai', 
 
    'Bertram Gilfoyle', 
 
    'Erlich Bachman', 
 
    'Monica Hall', 
 
    'Nelson Bighetti', 
 
    'Aaron Anderson', 
 
    'Donald \'OJ\' Dunn' 
 
    ] 
 

 
    var startDate = [new Date(2016, 0, 2), 
 
    new Date(2015, 5, 1), 
 
    new Date(2015, 11, 31), 
 
    new Date(2014, 0, 1), 
 
    new Date(2016, 6, 16), 
 
    new Date(2016, 9, 12), 
 
    new Date(2017, 5, 20), 
 
    new Date(2019, 0, 1), 
 
    new Date(2015, 0, 1), 
 
    new Date(2016, 9, 21), 
 
    new Date(2015, 8, 1), 
 
    new Date(2017, 6, 4), 
 
    new Date(2015, 6, 17) 
 
    ] 
 

 
    var endDate = [new Date(2025, 6, 25), 
 
    new Date(2016, 11, 17), 
 
    new Date(2016, 2, 4), 
 
    new Date(2018, 6, 16), 
 
    new Date(2017, 11, 25), 
 
    new Date(2020, 2, 3), 
 
    new Date(2019, 6, 13), 
 
    new Date(2019, 9, 16), 
 
    new Date(2018, 9, 23), 
 
    new Date(2019, 7, 12), 
 
    new Date(2019, 2, 17), 
 
    new Date(2022, 3, 1), 
 
    new Date(2021, 0, 21) 
 
    ] 
 

 
    var barLabel = []; 
 
    for (var i = 0; i < startDate.length; ++i) { 
 
    barLabel.push("potato"); 
 
    } 
 

 
    var color = ['#FF9900', 
 
    '#FF9900', 
 
    '#FF9900', 
 
    '#FF9900', 
 
    '#FF9900', 
 
    '#FF9900', 
 
    '#FF9900', 
 
    '#FF9900', 
 
    '#FF9900', 
 
    '#FF9900', 
 
    '#868686', 
 
    '#FF9900', 
 
    '#FF9900' 
 
    ] 
 

 
    heightVal = 50 * name.length; 
 
    if (heightVal > 500) { 
 
    heightVal = 500; 
 
    } 
 

 
    document.getElementById("timeline").style = "height: " + heightVal.toString() + "px;"; 
 

 
    var accounts = []; 
 

 
    for (i = 0; i < endDate.length; i++) { 
 
    accounts.push([name[i], barLabel[i], startDate[i], endDate[i]]); 
 
    } 
 

 
    var options = { 
 
    colors: color, 
 
    timeline: { 
 
     colorByRowLabel: true 
 
    } 
 
    }; 
 

 
    dataTable.addRows(accounts); 
 

 
    chart.draw(dataTable, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<p id="demo"></p> 
 
<div id="timeline" style="height: 240px;"></div>

Answer 2

es gelöst. colorByRowLabel muss auf true festgelegt werden. Ich glaube, dass der Wert der Balkenbeschriftung als Metrik zum Einfärben verwendet wird, wenn er auf "false" gesetzt ist und nicht auf den Index dieser Zeile in Bezug auf das Farbfeld.