你好！
为不同数据的柱状图赋值对应的颜色，只需要设置series->data中每个元素的color属性即可。
//定义一个颜色数组var COLORS = ['#4dc9f6','#f67019','#f53794','#537bc4','#acc236','#166a8f','#00a950','#58595b','#8549ba']
//根据数值返回对应的颜色值
var getColorByData = function(v) {
return v < 80 ? COLORS[0]
: v < 83 ? COLORS[1]
: v < 86 ? COLORS[2]
: v < 87 ? COLORS[3]
: v < 88 ? COLORS[4]
: v < 89 ? COLORS[5]
: COLORS[6]
}
//对图表数据进行color属性赋值,用于显示
var genData = function(data) {
if(data && data.length>0) {
for(var i=0i<data.lengthi++){
data[i].color = getColorByData(data[i].y)
}
}
return data
}
//图表数据
var _data = [
{
name: "下车体1#",
y: 88,
},
{
name: "下车体2#",
y: 89,
},
{
name: "下车体3#",
y: 82,
},
{
name: "下车体4#",
y: 85,
},
]
Highcharts.chart('gongzhuangjiancha', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
type: 'category'
},
yAxis: {
max: 100,
min:50,
title: {
text: null
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px"></span><br>',
pointFormat: '<span style="color:{green}">{point.name}</span>: <b>符合率为{point.y:.2f}%</b><br/>'
},
series: [
{
name: "Browsers",
colorByPoint:false ,
data: genData(_data)
}
],
})
代码比较简单，看下注释很好理解。
希望对你有帮助！
首先你的了解颜色的概念
下面我简单介绍下颜色概念在32位系统上我们所看到的颜色由RGB三原色显示再加上一个透明度通道就形成了多种多样的颜色
多的我就不多说了下面直接写一份演示代码
<!DOCTYPE html><html>
<head>
<title>test</title>
<style>
.tsetDiv{
width:40px
height: 40px
border-radius: 100%
font-size: 0
display: inline-block
margin-left: 10px
vertical-align: middle
}
#boxF{
width:300px
font-size: 0
height: auto
}
</style>
</head>
<body>
<div id="boxF"></div>
<script type="text/javascript">
var boxf=document.getElementById("boxF")
var divC=null
var r=0
var g=0
var b=0
for(var i=0i<10i++){
for(var j=0j<10j++){
divC=document.createElement("div")
divC.style.backgroundColor="rgb("+r+","+g+","+b+")"
divC.setAttribute("class","tsetDiv")
boxf.appendChild(divC)
}
//修改r g b加的不同值可以得到不同的效果 rgb最大值为255 所以不用担心超过不显示
r+=15
g+=25
b+=35
}
</script>
</body>
</html>
运行效果为下图
$(document).ready(function(){$("td").each(function(){
var tdNum=Number($(this).html())
if(tdNum>5){
$(this).css("background-color","pink")
}
})
})
