highcharts: définir dynamiquement les couleurs dans le diagramme à secteurs

Je suis en train de définir dynamiquement la couleur pour chaque seria en fonction de leur type.
Ci-dessous mon code qui ne fonctionne pas, mais en montrant ce que je suis en train de faire. Je voudrais définir la couleur de certain type, par exemple: 

if type = 'IS' then color =  '#FFCACA'

Je ne peux pas attendre que ret aura tous types, donc j'ai besoin de savoir quels types sont retournés en ret et puis asociate couleur d'un certain type.

Comment faire?

ce code, c'est depuis que les données reçues:

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;
})()
}]
});
});
});
}
  • Au lieu de l'aide de commutateurs, une carte serait un million de fois plus vite (Ce n'est pas une partie du problème/solution) var colors = { 'AB': '#C6F9D2','BC': '#CCCCB3' } return colors[this.type];
  • Qu'essayez-vous de faire ? Vous avez un graphique en secteurs, de sorte que la serie type sera toujours pie.
InformationsquelleAutor dllhell | 2012-12-14
  1. 38

    Pour un camembert, vous avez à mettre la tranche de couleur à l'intérieur data.

    Et vous devez utiliser le point name et pas la série du type, de la serie type sera toujours "pie".

    Pour cela, vous pouvez l'utilisation de javascript object notation pour stocker la couleur de chaque série aura.

    C'est fastar que d'utiliser un 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']
}
]
}]

    Vous pouvez le voir, il travail ici.

    • monsieur, vous êtes peut-héros.
    • Wow, merci beaucoup.
    • comment pouvons-nous utiliser ce si nous obtenons des données dynamiquement à partir de mysql au format JSON ? série: [{ type: 'tarte', nom: '"Exécution Sommaire", data:[] }] }; fonction getAjaxData(id) { $.getJSON("data/pie.php", {id: id}, function(json) { options.série[0].données = json; tableau = new Highcharts.Tableau(options); }); }
    InformationsquelleAutor Ricardo Alvaro Lohmann
  2. 0

    La return déclaration que vous avez, il est de retour à partir de la fonction d'être passée à la each fonction, pas la couleur de la fonction. Aussi, il n'y a pas besoin d'utiliser un commutateur cas pour ce en JavaScript.

    MODIFIER: Essayer quelque chose comme cela

    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]
}]

    C'est pas vraiment clair à partir de votre code ce ret est, donc, je ne suis pas sûr que le code ci-dessus fonctionne, mais il devrait vous donner une idée approximative de la façon dont il peut être fait.

    • merci de regarder mon montage, peut-être que c'est plus clair maintenant
    InformationsquelleAutor Jamie Wong
  3. 0

    Pourquoi ne pas définir la couleur de la propriété lorsque vous appuyez sur la série de données pour le graphique? Sans voir ce que vous utilisez pour construire votre objet de série, je ne peux fournir certains pseudo-code:

    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'; 
}
)

    Essentiellement, vous prétraitement de la série de données des éléments. Voir cette question explicite de mise en forme. Vous pouvez définir la color propriété d'une série que vous n'avez pas à dépendre de la valeur par défaut HighCharts liste des couleurs ou une couleur personnalisée liste, comme décrit dans une autre réponse. Notez que le color propriété n'est pas répertorié dans la HighCharts API référence mais vous pouvez l'utiliser.

    InformationsquelleAutor wergeld
  4. -1

    - Je utiliser Highcharts sans donner n'importe quelle couleur de la propriété est à l'aide de leur propre bibliothèque pour la sélection automatique de la couleur. Utilisation ci-dessous, espérons que cela fonctionnera pour u

    series: [{
type: 'pie',
name: 'Current selection',
data: [
['Name_1',  537],
['Name_2',  181],
['Name_3',  156]
]
}]

    nous pouvons mettre en highchart couleur personnalisée en setOption function

    Highcharts.setOptions({
colors: ['#F64A16', '#0ECDFD', '#FFF000']
});
    • mais je dois à définir la spécificité de couleur pour particulier ['Name_1', 537]. Maintenant, les couleurs sont définies de façon aléatoire ce qui est inapproprié pour ma situation.
    • - je mettre à jour ma réponse, vérifier maintenant
    • Shams je v aussi édité des questions afin d'être plus clair, le problème est que la couleur de la propriété n'est pas réitéré que les données de propriété. Peut-être que je suis en train de penser dans le mauvais sens...
    InformationsquelleAutor Arif