Comment puis-je changer les couleurs de mon piechart highcharts?
j'utilise highcharts pour faire un piechart mais j'ai du mal à charger un jeu de couleurs personnalisé pour mon chart.
Voici mon code:
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
return new Highcharts.Chart({
chart: {
renderTo: 'trailpiechart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
backgroundColor: "#f8f8f8",
margin: [20, 20, 20, 20]
},
credits: {
enabled: false
},
title: {
text: caption
},
tooltip: {
formatter: function () {
return this.y + ' links';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend: {
layout: 'vertical',
floating: false,
borderRadius: 0,
borderWidth: 0
},
series: [{
type: 'pie',
name: 'Browser share',
data: data
}]
});
});
</script>
mon diagramme à secteurs fonctionne avec ce code mais il utilise seulement la palette de couleurs par défaut.
Comment spécifier une couleur personnalisée définie?
8 réponses
Highcharts.setOptions({
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Regardez l'exemple suivant http://jsfiddle.net/8QufV/
je pense que ce que vous devez faire est de définir les couleurs à l'aide de thème au lieu de setOptions comme suit:
Highcharts.theme = {colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5',
'#64E572', '#FF9655', '#FFF263', '#6AF9C4']});
pour ceux d'entre vous qui préfèrent initialiser la couleur dans les configs, vous pouvez simplement mettre les couleurs dans la partie plotOptions de l'objet config comme suit:
...,
plotOptions: {
pie: {
colors: [
'#50B432',
'#ED561B',
'#DDDF00',
'#24CBE5',
'#64E572',
'#FF9655',
'#FFF263',
'#6AF9C4'
],
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
...
pour répondre À @Loko Web Design est question https://stackoverflow.com/a/38794379/7475250
y a-t-il une page Web qui dit à quoi correspond chacune des "couleurs"? Toutes les réponses ici montrent quelque chose comme:
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']mais que faire #333, # CB2326,etc. en fait le changement? Évidemment je peux juste les changer et voir quels changements, mais il serait bon d'avoir ceci référence disponible quelque part.
La couleur docs sont disponible ici. Bien qu'utiles, ils ne décrivent pas ce que la modification d'une couleur spécifique. Voici ma meilleure description.
les couleurs prop donnent les couleurs que vous souhaitez que le graphique boucle. Par exemple, si vous aviez la couleur suivante prop.
colors: ['blue', 'green']
vos tranches de tarte alterneraient entre le bleu et le vert. Changer le bleu en Rouge vos couleurs alterneraient alors entre le rouge et le vert. Test avec les éléments suivants tripoter
étendre la liste des couleurs augmente le nombre de couleurs avant de les répéter.
colors: ['blue', 'green', 'yellow']
répétez les couleurs si plus de 4 tranches sont dans votre ensemble de données.
Highcharts.setOptions({
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']
});
y a-t-il une page Web qui dit à quoi correspond chacune des "couleurs"? Toutes les réponses ici montrent quelque chose comme:
colors: ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']
Mais Que faire # 333, # CB2326,etc. en fait le changement? Évidemment, je peux les changer et voir quels changements, mais il serait bien d'avoir cette référence disponible quelque part.
j'ai eu le même problème. Dans highcharts.css Il y a une section appelée "couleurs par défaut". Après avoir supprimé cette section, je pourrais utiliser des couleurs personnalisées. De toute façon, je suppose que vous n'avez pas besoin de highcharts.css si vous utilisez la version v5.0.4 ou plus.
Highcharts.Color(Highcharts.getOptions ().couleurs[0]).setOpacity (0.5).get('rgb')]
dans les grands charts nous avons des couleurs intégrées. Vous devez donc changer le chemin de la couleur[0] ou [1]........[6]