chart.js bar chart color change based on value(chart.js 条形图颜色根据值变化)
问题描述
I have a bar chart that is showing data from a database and I need to be able to show a different color for different numeric values. For example the 'loc_health' returns values between 1 and 10 based, so I need to show 1 as red, 2 as orange, 3 as yellow, 4 as green etc...
I have searched the chart.js documentation but cannot find a solution for this.
var context = document.getElementById('healthRatings').getContext('2d');
window.myObjBar = new Chart(context).Bar({
labels : loc_id_grab,
datasets : [{
fillColor : ["rgba(220,220,220,0.5)"],
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : loc_health
}]
}, {
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 1,
scaleStartValue : 0,
barShowStroke : false,
barStrokeWidth : 1,
showTooltips : false,
barValueSpacing : 2,
animation : false,
responsive : true,
maintainAspectRatio : true
});
You can color each individual bar by accessing window.myObjBar.datasets[0].bars[0].fillColor
property, then update the chart
In your case, you can loop through your elements and color each bar accordingly
var bars = myObjBar.datasets[0].bars;
for(i=0;i<bars.length;i++){
var color="green";
//You can check for bars[i].value and put your conditions here
bars[i].fillColor = color;
}
myObjBar.update(); //update the chart
A working JsFiddle
这篇关于chart.js 条形图颜色根据值变化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:chart.js 条形图颜色根据值变化
基础教程推荐
- Chart.js 在线性图表上拖动点 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 直接将值设置为滑块 2022-01-01