我在 c3.js 中有以下条形图 (here's a fiddle) :
var chart = c3.generate({
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
colors: {
value: '#FF0000'
},
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
这会将所有条设置为红色。我想要的是条形的颜色 this gradient从 FF0000 到 10FF00,我相信这只是将 4096 添加到颜色的十进制值的增量。
我希望渐变从 50 开始到 100 结束(也就是说,绿色及以下的任何东西都将是纯红色 FF0000,而 100 将是绿色 10FF00)。
我试图关注 this example根据值设置 c3.js 图形上数据点的颜色。在示例中,data3
的值随着其值的增加而变暗。我一直在尝试修改 color: function (color, d)
,但我似乎无法让它做任何我想让它做的事情。
如有任何帮助,我们将不胜感激。谢谢!
最佳答案
我不确定您在 color: function
中做了什么,但这是设置它的正确方法。关于你想要的梯度,它不能通过仅仅增加它的十六进制值来实现,因为从黄色到绿色需要减少该值。以下示例从红色变为黄色:
var chart = c3.generate({
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
colors: {
value: function(d) {
return '#'+(0xff0000+(d.value-25)*256*3).toString(16);
}
},
},
axis: {
x: {
type: 'category
}
},
legend: {
show: false
}
});
关于javascript - 基于 c3.js 中值的条形图颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37843555/