Google 时间线 - 根据名称更改数据颜色
Google Timeline - change color of data depending on name
我有一个 google 时间轴,如下面的代码所示,我想更改任何标题为 "BLACK" 的条目的颜色。
我似乎无法让它工作,我尝试了几种不同的解决方案。这是我的代码:
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});
这里的问题是您正在使用 arrays
,但您将它们视为 Objects
。 myData[i]
没有 Name
的 属性,因为它是 Array
。但是,您可以通过获取 myData[i][1]
(存储名称的数组中的插槽)来访问 Name
的位置。您可以用此替换 for 循环代码以更改颜色属性 (myData[i][2]
)
for(i=1;i<myData.length;i++){
if(myData[i][1] == 'BLACK'){
myData[i][2] = '#000000';
}
}
我有一个 google 时间轴,如下面的代码所示,我想更改任何标题为 "BLACK" 的条目的颜色。 我似乎无法让它工作,我尝试了几种不同的解决方案。这是我的代码:
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});
这里的问题是您正在使用 arrays
,但您将它们视为 Objects
。 myData[i]
没有 Name
的 属性,因为它是 Array
。但是,您可以通过获取 myData[i][1]
(存储名称的数组中的插槽)来访问 Name
的位置。您可以用此替换 for 循环代码以更改颜色属性 (myData[i][2]
)
for(i=1;i<myData.length;i++){
if(myData[i][1] == 'BLACK'){
myData[i][2] = '#000000';
}
}