图表.js条形图颜色根据值而变化
chart.js bar chart color change based on value
我有一个显示数据库中数据的条形图,我需要能够为不同的数值显示不同的颜色。例如,'loc_health' 返回基于 1 到 10 之间的值,所以我需要将 1 显示为红色,2 显示为橙色,3 显示为黄色,4 显示为绿色等......
我已经搜索了图表.js文档,但找不到解决方案。
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
});
您可以在创建图表之前检查该值:
var context = document.getElementById('healthRatings').getContext('2d');
var colors = []
for(var i = 0; i < loc_health.length; i++){
var color;
switch(loc_health[i]){
case 1:
color = "red";
break;
case 2:
color = "orange";
break;
case 3:
color = "yellow";
break;
case 4:
color = "green";
break;
//etc..
}
colors[i] = color;
}
window.myObjBar = new Chart(context).Bar({
labels : loc_id_grab,
datasets : [{
backgroundColor: colors,
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
});
您可以通过访问属性为每个单独的条形着色window.myObjBar.datasets[0].bars[0].fillColor
然后更新图表
在您的情况下,您可以遍历元素并相应地为每个条形着色
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
一个工作中的JsFiddle
你可以做这样的事情
changeColor(loc_health);
function changeColor(random_value){
switch(random_value){
case = 1:
datasets[0].fillColor = "#000";
break;
case = 2:
//etc
}
myObjBar.update();
}
在图表实例上调用 update() 将使用任何更新的值重新渲染图表,从而允许您编辑多个现有点的值,然后在一个动画渲染循环中渲染这些点。
相关文章:
- JS幻灯片与CSS背景颜色变化
- 当数据库中的某些内容发生变化时调用HTTP方法Meteor.js
- 饼干.JS如何记住许多变化
- js高度变化的转换
- HighCharts.js TickInterval动态变化
- JS触发的复选框's已检查属性;t动态变化
- Angular js-当值发生变化时高亮显示dom
- 找出 Vue.js 深度自定义指令中哪个属性发生了变化
- 图表.js条形图颜色根据值而变化
- JS监视CSS属性的变化,如“display:none”=>“display:block”
- D3.js:计算随范围变化的时间尺度上的柱线宽度
- d3.js上传到bl.ocks.org时的动态高度变化
- 什么'这是在angular JS中创建一个表的好方法,当单元格发生变化时,该表会高亮显示
- 为什么这个JS代码段中的上下文会发生变化
- 可观察到的变化,但没有;t在knockout.js中通知订阅者
- backbone.js:自上次服务器保存以来有变化吗
- 如何根据下拉列表中的变化使用d3.js对数据集进行子集设置
- JS SDK auth.logout事件行为最近似乎发生了变化
- 当其中一个模型发生变化时,我如何在Backbone.js中为集合视图附加事件处理程序?
- 流星js的iron router:当路由发生变化时,应用CSS更改