Highcharts: динамически определять цвета в круговой диаграмме
Я пытаюсь динамически определять цвет для каждой серии в зависимости от их типа.
Ниже мой код, который не работает, но показывает, что я пытаюсь сделать. Я хотел бы определить цвет для определенного типа, например:
if type = 'IS' then color = '#FFCACA'
Я не могу ожидать, что ret будет иметь все типы, поэтому мне нужно знать, какие типы возвращаются в ret, а затем сопоставить цвет с определенным типом.
Как это сделать?
это код с момента получения данных:
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;
})()
}]
});
});
});
}
Ответы
Ответ 1
Для круговой диаграммы вы должны установить цвет среза внутри data.
И вы должны использовать точку name, а не серийный тип, серийный тип всегда будет "pie".
Для этого вы можете использовать нотацию объектов javascript, чтобы сохранить цвет каждой серии.
Это быстрее, чем использовать 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']
}
]
}]
Здесь вы можете увидеть .
Ответ 2
Оператор return, который у вас есть, возвращает функцию, переданную функции each, а не функцию цвета. Кроме того, нет необходимости использовать для этого сценарий переключения в JavaScript.
EDIT: попробуйте что-то вроде этого
series: [{
type: 'pie',
name: 'Current selection',
color: {
'AB': '#C6F9D2',
'BC': '#CCCCB3',
'CL': '#CECEFF',
'CI': '#FFCAFF',
'HB': '#D0CCCD',
'ON': '#FFCC99',
'PM': '#FFCBB9',
'SR': '#EAEC93',
'TS': '#D7FBE6',
'IS': '#FFCACA',
'FREE': '#00FF00'
}[this.type]
}]
Из вашего кода не совсем ясно, что такое ret, поэтому я не уверен, что приведенный выше код работает, но он должен дать вам общее представление о том, как это можно сделать.
Ответ 3
Почему бы не установить свойство цвета, когда вы нажимаете серию данных на диаграмму? Не видя, что вы используете для создания объекта серии, я могу предоставить только какой-нибудь псевдо-код:
for each seriesItem in seriesList (
set highcharts.series[seriesItem].name = seriesList[seriesItem].seriesTitle
set highcharts.series[seriesItem].data = seriesList[seriesItem].data
set highcharts.series[seriesItem].Note = seriesList[seriesItem].extraInfo
set highcharts.series[seriesItem].color = switch (seriesList[seriesItem].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';
}
)
По существу вы предварительно обрабатываете элементы ряда данных. См. этот вопрос для явного форматирования. Вы можете установить свойство color ряда - вам не нужно зависеть от списка цветов по умолчанию HighCharts или списка пользовательских цветов, как описано в другом ответе. Обратите внимание, что свойство color не указано в справочнике HighCharts API но вы можете его использовать.
Ответ 4
Я использую Highcharts без каких-либо свойств цвета, поскольку использует собственную библиотеку для автоматического выбора цвета. Используйте ниже, надейтесь, что это сработает для u
series: [{
type: 'pie',
name: 'Current selection',
data: [
['Name_1', 537],
['Name_2', 181],
['Name_3', 156]
]
}]
мы можем установить цветной пользовательский цвет с высоким качеством setOption function
Highcharts.setOptions({
colors: ['#F64A16', '#0ECDFD', '#FFF000']
});
