當前位置:編程學習大全網 - 源碼下載 - js代碼怎麽比較柱狀的數值的大小賦予柱狀不同顏色

js代碼怎麽比較柱狀的數值的大小賦予柱狀不同顏色

妳好!

為不同數據的柱狀圖賦值對應的顏色,只需要設置series->data中每個元素的color屬性即可。

//定義壹個顏色數組

var?COLORS?=?['#4dc9f6','#f67019','#f53794','#537bc4','#acc236','#166a8f','#00a950','#58595b','#8549ba'];

//根據數值返回對應的顏色值

var?getColorByData?=?function(v)?{

return?v?<?80COLORS[0]

:?v?<?83COLORS[1]

:?v?<?86COLORS[2]

:?v?<?87COLORS[3]

:?v?<?88COLORS[4]

:?v?<?89COLORS[5]

:?COLORS[6];

}

//對圖表數據進行color屬性賦值,用於顯示

var?genData?=?function(data)?{

if(data?&&?data.length>0)?{

for(var?i=0;i<data.length;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,

},

];

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)

}

],

});

代碼比較簡單,看下註釋很好理解。

希望對妳有幫助!

  • 上一篇:如何正確地移除WordPress版本號
  • 下一篇:microsoft.net framework 1.1和microsoft.net framework 3.5 SP1有什麽區別?
  • copyright 2024編程學習大全網