我刚刚拿到了一本由Stephen A. Thomas撰写的名为《Data Visualization With Javascript》的书,我正在完成这些练习。第一章是关于Flotr2的。以下是这本书告诉我要做的:
var wins = [[[0, 13], [1, 11], [2, 15], [3, 15], [4, 18], [5, 21], [6, 28]]];
var wins2 = [[[0,28], [1,28], [2, 21], [3,20], [4,19]]];
var years = [[0, "2006"], [1, "2007"], [2, "2008"], [3, "2009"], [4, "2010"], [5, "2011"], [6, "2012"]];
var teams = [[0, "MCI"], [1, "MUN"], [2, "ARS"], [3, "TOT"], [4, "NEW"]];
window.addEventListener('load', function() {
Flotr.draw(document.getElementById('chart2'), wins2, {
title: "Premier League Wins (2011-2012)",
colors: ['#89afd2', '#1d1d1d', '#df021d', '#0e204b', '#e67840'],
bars: {
show: true,
barWidth: 0.5,
shadowSize: 0,
fillOpacity: 1,
lineWidth: 0
},
yaxis: {
min: 0,
tickDecimals: 0
},
xaxis: {
ticks: teams
},
grid: {
horizontalLines: false,
verticalLines: false
}
});
});
现在,这和书中的内容之间的唯一区别是,书中告诉我要做window.onload,而我使用了addEventListener。书上说这应该制作一个具有多种颜色(列出的颜色)的条形图,但我所有的条形都是相同的颜色,这是列出的第一种颜色。我已经尝试了所有方法,但似乎没有什么能让它起作用。有没有其他人在 Flotr2 中遇到过这个问题?我使用的是最新版本,所以这只是自本书出版以来新的 Flotr2 的问题吗?还是我做错了什么?
试试这个。
var wins2 = [[[0,28]],[[1,28]],[[2,21]], [[3,20]],[[4,19]]];
我认为这可能与您的数组有关...
var wins2 = [[[0,28], [1,28], [2, 21], [3,20], [4,19]]];
这使得一个包含 1 个数组的数组具有 4 个数组。所以flotr看到你只有1个索引,这就是为什么它只使用1种颜色。
尝试
var wins2 = [[0,28], [1,28], [2, 21], [3,20], [4,19]];