Google时间轴-根据名称更改数据的颜色

时间:2019-09-24 23:13:15

标签: javascript google-apps-script graph charts timeline

我有一个Google时间轴,如以下代码所示,并且想要更改标题为“黑色”的任何条目的颜色。 我似乎无法使其正常工作,并且我尝试了几种不同的解决方案。这是我的代码:

http://jsfiddle.net/5j0umkcx/1/


HTML:

<div id='chart_div'></div>

Javascript:

var myData = [
        ['Category', 'Name', {role: 'style'}, 'Start', 'End'],
        ['Foo', 'BLACK', '', new Date(2014, 7, 1), new Date(2014, 7, 5)],
        ['Foo', 'Homer', '', new Date(2014, 7, 6), new Date(2014, 7, 8)],
        ['Bar', 'Marge', '', new Date(2014, 7, 2), new Date(2014, 7, 9)]
    ]

        for(i=1;i<myData.length;i++){
    if(myData[i].Name == 'BLACK'){
        data[i].style = '#000000';
    }}


function drawChart() {

    var data = google.visualization.arrayToDataTable(myData);



    var chart = new google.visualization.Timeline(document.querySelector('#chart_div'));
    chart.draw(data, {
        height: 300,
        width: 600
    });
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});

1 个答案:

答案 0 :(得分:1)

这里的问题是您正在使用arrays,但是您将它们视为ObjectsmyData[i]不具有Name的属性,因为它是Array。但是,您可以通过获取Name(存储名称的数组中的插槽)来访问myData[i][1]的位置。您可以以此替换for循环代码以更改颜色属性(myData[i][2]

for(i=1;i<myData.length;i++){
    if(myData[i][1] == 'BLACK'){
        myData[i][2] = '#000000';
    }
}