我不明白如何在Chart.js中根据值定制点颜色?
如果y <= 0则点红色,如果y(0-4)则点蓝色,等等
const ctx = document.getElementById('chart');
const request = [
{x: 'Station1',y: 5},
{x: 'Station2',y: 2},
{x: 'Station3',y: 1},
{x: 'Station4',y: 8},
{x: 'Station5',y: 7},
{x: 'Station6',y: -2},
{x: 'Station7',y: 10},
{x: 'Station8',y: 0}
]
const labels = request.map(function(e) {return e.x;});
const fuelChart = new Chart(ctx,{
type:'scatter',
data: {
datasets: [{
data: request,
label:'Day to posts'
}]
},
options: {
responsive: true,
scales:{
x:{
type:'category',
labels:labels,
}
}
}
})
字符串
2条答案
按热度按时间s2j5cfk01#
你可以使用dataset的
backgroundColor
属性,并向它传递一个数组。数组可以基于数据构建,因此您可以添加自己的逻辑来返回所需的颜色。大概是这样的:
字符串
hyrbngr72#
这可以通过使用
Arrays.map()
来完成,如下所示:字符串
请看一下下面修改后的可运行代码,看看它是如何工作的。
的数据