highcharts：在饼图中动态定义颜色 [英] highcharts: dynamically define colors in pie chart
本文介绍了highcharts：在饼图中动态定义颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想根据类型动态定义每个seria的颜色。
下面是我的代码，它不工作，但表明我什么我想做。我想为某种类型定义颜色，例如：
if type ='IS'then color ='#FFCACA'
我不能指望ret将具有所有类型，所以我需要知道哪些类型在ret中返回，然后asociate
这是从收到数据后的代码：
success：function（ret）{
$（function（）{
var chart;
$（document）.ready（function（）{
chart = new Highcharts.Chart（{
chart：{
renderTo：'divPie_'+ id，
plotBackgroundColor：null，
plotBorderWidth：null，
plotShadow：true，
width：350，
height：350
} {
text：refrigname
}，
tooltip：{
pointFormat：'{series.name}：< b> {point.percentage}％< / b& ，
percentageDecimals：1
}，
plotOptions：{
pie：{
allowPointSelect：true，
cursor：'pointer'，
dataLabels：{
enabled：false
}，
showInLegend：true
}
}，
系列：[{
type：'pie '，
name：'current selection'，
color：（function（）{
switch（ret.type）{
case'AB'：return'＃C6F9D2';
case'BC'：return'＃CCCCB3';
case'CL'：return'#CECEFF';
case'CI'：return'#FFCAFF';
case'HB'：return'＃D0CCCD';
case'ON'：return'＃FFCC99';
case'PM'：return'＃FFCBB9';
case'SR'：return'＃EAEC93';
case'TS'：return'＃D7FBE6';
case'IS'：return'#FFCACA';
case'FREE'：return'＃00FF00';
}
}），
data：（function（）{
var arr = [];
$（ret）.each $ b var labelname =;
switch（this.type）{
caseAB：labelname =Antibodies; break;
caseBC：labelname =Bacteria ; break;
caseCL：labelname =Cell lines; break;
caseCI：labelname =Custom items; break;
caseHB：labelname = hybridoma; break;
caseON：labelname =Oligonucleotides; break;
casePM：labelname =Plasmids; break;
caseSR：labelname =siRNA; break;
caseTS：labelname =Tissue samples;打破;
caseIS：labelname =Isolates;打破;
caseFREE：labelname =可用空间;打破;
}
arr.push（[labelname，this.cnt]）;
}）
return arr;
}）（）
}]
}）;
}）;
}）;
}
解决方案
对于饼图，您必须在 data 中设置切片颜色。
并且必须使用名称而不是系列类型，系列类型将始终为pie。
这可以使用JavaScript对象符号来存储每个系列将具有的颜色。
比使用开关 。
var getColor = {
'AB'：'＃C6F9D2'，
'BC'：'＃CCCCB3'，
'CL'：'#CECEFF'，
'CI'：'#FFCAFF'，
'HB'：'＃D0CCCD'
'ON'：'＃FFCC99'，
'PM'：'＃FFCBB9'，
'SR'：'＃EAEC93'，
'TS'：'＃D7FBE6 '，
'IS'：'#FFCACA'，
'FREE'：'＃00FF00'
};
系列：[{
type：'pie'，
name：'当前选择'，
数据：[
{
名称：'AB'，
y：45.0，
color：getColor ['AB']
}，{
name：'BC'，
y：26.8，
color：getColor ['BC']
}，{
name：'CL'，
y：12.8，
sliced：true，
selected：
color：getColor ['CL']
}，{
name：'CI'，
y：8.5，
color：getColor ['CI']
}，{
name：'HB'，
y：6.2，
color：getColor ['HB']
}，{
name： ，
y：0.7，
color：getColor ['ON']
}
]
}]
您可以 在此处工作 查看。
I'm trying to dynamically define color for each seria depending of their type. Below is my code which doesn't work but showing what I?m trying to do. I would like to define colour for certain type eg:
if type = 'IS' then color = '#FFCACA'
I cannot expect that ret will have all types so I need to know which types are returned in ret and then asociate color to certain type.
How to do that?
this is code since data received:
success: function (ret) {
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'divPie_' + id,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: true,
width: 350,
height: 350
},
title: {
text: refrigname
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Current selection',
color: (function () {
switch (ret.type) {
case 'AB': return '#C6F9D2';
case 'BC': return '#CCCCB3';
case 'CL': return '#CECEFF';
case 'CI': return '#FFCAFF';
case 'HB': return '#D0CCCD';
case 'ON': return '#FFCC99';
case 'PM': return '#FFCBB9';
case 'SR': return '#EAEC93';
case 'TS': return '#D7FBE6';
case 'IS': return '#FFCACA';
case 'FREE': return '#00FF00';
}
}),
data: (function () {
var arr = [];
$(ret).each(function () {
var labelname = "";
switch (this.type) {
case "AB": labelname = "Antibodies"; break;
case "BC": labelname = "Bacteria"; break;
case "CL": labelname = "Cell lines"; break;
case "CI": labelname = "Custom items"; break;
case "HB": labelname = "Hybridoma"; break;
case "ON": labelname = "Oligonucleotides"; break;
case "PM": labelname = "Plasmids"; break;
case "SR": labelname = "siRNA"; break;
case "TS": labelname = "Tissue samples"; break;
case "IS": labelname = "Isolates"; break;
case "FREE": labelname = "Free space"; break;
}
arr.push([labelname, this.cnt]);
})
return arr;
})()
}]
});
});
});
}
解决方案
For a pie chart you have to set the slice color inside data.
And you have to use the point name and not serie type, serie type will always be "pie".
For this you can use javascript object notation to store which color each serie will have.
It's fastar than use a switch.
var getColor = {
'AB': '#C6F9D2',
'BC': '#CCCCB3',
'CL': '#CECEFF',
'CI': '#FFCAFF',
'HB': '#D0CCCD',
'ON': '#FFCC99',
'PM': '#FFCBB9',
'SR': '#EAEC93',
'TS': '#D7FBE6',
'IS': '#FFCACA',
'FREE': '#00FF00'
};
series: [{
type: 'pie',
name: 'Current selection',
data: [
{
name: 'AB',
y: 45.0,
color: getColor['AB']
}, {
name: 'BC',
y: 26.8,
color: getColor['BC']
}, {
name: 'CL',
y: 12.8,
sliced: true,
selected: true,
color: getColor['CL']
}, {
name: 'CI',
y: 8.5,
color: getColor['CI']
}, {
name: 'HB',
y: 6.2,
color: getColor['HB']
}, {
name: 'ON',
y: 0.7,
color: getColor['ON']
}
]
}]
You can see it working here.
这篇关于highcharts：在饼图中动态定义颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
