js如何获取从数据库中取出来所展示的数据并改变颜色

var str = "页面展示从数据库中取出来的字段title。。js获取所有展示出来title的内容并改变颜色";

str = strfontcolor("red");

divinnerHTML = str;

你好！

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

        for(var i=0;i<datalength;i++){

            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,

  },

];

Highchartschart('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: '{pointy:1f}%'

  }

}

  },

  tooltip: {

    headerFormat: '<span style="font-size:11px"></span><br>',

pointFormat: '<span style="color:{green}">{pointname}</span>: <b>符合率为{pointy:2f}%</b><br/>'

  },

  series: [

      {

  name: "Browsers",

  colorByPoint:false ,

      data: genData(_data)

}

  ],

});

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

希望对你有帮助！

IE8 background 即时你写了颜色他也是undefined

background-color 颜色值 transparent

火狐 background 即时你写了颜色他也无法获取

background-color rgb格式 transparent

谷歌 background rgba(255, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box

background-color rgb格式 rgba(0, 0, 0, 0)

还有background 不光可以写颜色，还可以写加颜色等，如果你只是按他们的默认值来判读是否有颜色的话，我感觉行不通，如果background :后面跟的是，jqury能获得值不是默认值，那你怎么判读他是否有背景色

不过也不是行不通的还有一个办法就是写一个方法把所有的颜色都转化为16进制

这个方法要具备这些功能

1、他能认识颜色值是英文名还是rgb格式的

2、把不是颜色多余的部分去掉 如"rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box“要截取成rgba(0, 0, 0, 0)

这个方法只能用在background-color上

因为IE、火狐取不到background-color的颜色值，即时你设置了

昨天在做js

从10种颜色中随机取色，并每次取出的颜色不同的时候，考虑了很多，最终用如下来实现：

复制代码

代码如下:

var

colorList

=

["#FFFF99","#B5FF91","#94DBFF","#FFBAFF","#FFBD9D","#C7A3ED","#CC9898","#8AC007","#CCC007","#FFAD5C"];

for(var

i=0;i<lineListlength;i++){

var

bgColor

=

getColorByRandom(colorList);

}

function

getColorByRandom(colorList){

var

colorIndex

=

Mathfloor(Mathrandom()colorListlength);

var

color

=

colorList[colorIndex];

colorListsplice(colorIndex,1);

return

color;

}

这样便能每次取出的颜色是随机的且都不一样

以上就是关于js如何获取从数据库中取出来所展示的数据并改变颜色全部的内容，包括:js如何获取从数据库中取出来所展示的数据并改变颜色、js代码怎么比较柱状的数值的大小赋予柱状不同颜色、js 如何判断元素宽高样式 到底为 百分比、Auto或者PX等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！