js代码怎么比较柱状的数值的大小赋予柱状不同颜色

你好！

为不同数据的柱状图赋值对应的颜色，只需要设置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)

}

  ],

})

代码比较简单，看下注释很好理解。

希望对你有帮助！

1.首先绘制好柱形图。

2.然后双击图中的任意一个柱子，d出属性框，右侧选中Pattern。

3.将Pattern选项卡下Fill中的Color设置为Individual Color（纯色）-White。

本例中是“白色向红色的渐变模式”，所以主体色为白色（即柱子中间的部分是白色）。

4.将Pattern选项卡下Gradient Fill（渐变填充）中的Mode（方式）设置为Two Colors。（因为是两个颜色间渐变）

---