Google Chartsタイムライン：カラー＆バーラベルの問題

Question

タイムラインの図があります。タイムラインに3つの列（行ラベル、開始日、終了日）があり、色付けすると、すべてが完全に機能します。しかし、私はタイムラインに別の列（バーラベル）を追加しました。今は色づけがすべて乱れています。誰もこの問題を解決する方法を知っていますか？そうでない場合、この問題はバグとみなされますか？問題を実証jsfiddleに

サンプルコードスニペット： https://jsfiddle.net/9egybsro/

私のハードコードされた色配列を見て：最後の小節に第三除く

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

すべてのバーがオレンジ色に着色する必要があります。最後の3番目のバーはグレーの色にする必要があります。実行ボタンがヒットしたときに示されているように、すべてのバーはオレンジ色になっています。

Answer 1

デフォルトで、colorsは...バー

が異なるバーのラベルを使用し、

timeline: { 
    colorByRowLabel: true 
} 

さもなければcolorsアレイの行ラベル/位置を使用するようにtimeline.colorByRowLabelを設定ラベル従う

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

次の作業スニペットを参照してください...

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

はそれを解決しました。 colorByRowLabelをtrueに設定する必要があります。色の配列に対するその行のインデックスではなく、falseに設定されている場合、バーラベルの値は色付けの基準として使用されると考えています。