我用Flot库做图表,我需要呈现一个条形图,并且有一个特殊的系列需要区分,给它一个特定的颜色是最好的选择。
我已经在之前的图表中这样做了,为推送到 data
的系列提供了 color
参数,但它在这里不起作用。
21 条应该是红色的,但事实并非如此。
首先我尝试了通常的做法:
series.push({
color: 'anyHexColorCode',
data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
})
在一个循环中,我检查了期望值并赋予了不同的颜色,就像我在下面显示的当前函数中所做的一样。
这就是我发送给 plot 的方式:
function plotInterpolacion(respuesta) {
clearCharts()
var series = []
var colorsList = ['#8B0000','#FFA614']
alert("La aproximación para x=" + $("#a").val() + " es igual a: " + respuesta['aproximacion'])
var xs = Object.keys(respuesta['puntos']).sort().forEach(function (k,i) {
if (k == respuesta['aproximacion']) {
series.push({
color: 0,
data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
})
}
else {
series.push({
color: 1,
data: [[parseFloat(k).toFixed(9).toString(),respuesta['puntos'][k]]]
})
}
})
$.plot($("#bars"), series, {
bars: {
show:true,
align: "center",
barWidth: 0.6
},
xaxis: {
mode: "categories",
tickLength:0
},
colors: colorsList
})
}
在该示例中,21
的栏应为红色。
这就是 respuesta['puntos']
的样子:
"puntos": {
"18.0": 79.0,
"17.8": 72.0,
"21.0": 184.0000000000009
}
我添加了 jquery.colorhelpers.js
flot 插件,但没有任何区别。
最佳答案
barWidth 以轴单位表示。因此,如果 barWidth 为 0.5,并且第一条和第二条之间只有 0.2 个 x 单位,它们当然会重叠。
一个系列只能有一种颜色,并且您的所有条形都在同一个系列中。如果您希望它们有不同的颜色,请将它们分成不同的系列。
关于javascript - 如何使用 Flot Java Script 库为条形图中的系列分配不同的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22468477/