web-dev-qa-db-fra.com

highcharts: définition dynamique des couleurs dans un graphique à secteurs

J'essaie de définir dynamiquement la couleur de chaque série en fonction de leur type . Ci-dessous se trouve mon code qui ne fonctionne pas, mais montre ce que j'essaie de faire. Je voudrais définir la couleur pour certains types, par exemple: 

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

Je ne peux pas m'attendre à ce que ret ait tous les types, donc j'ai besoin de savoir quels types sont retournés dans ret et ensuite associer une couleur à un certain type.

Comment faire ça?

c'est le code depuis 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;
                    })()
                }]
            });
        });
    });


}
javascriptcolorshighchartsseries
16
dllhell

Pour un graphique à secteurs, vous devez définir la couleur de la tranche dans data.
Et vous devez utiliser le point name et pas le type de série, le type de série sera toujours "pie".

Pour cela, vous pouvez utiliser utiliser la notation objet javascript pour enregistrer la couleur de chaque série.
C’est plus rapide que d’utiliser une 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 travailler ici .

38
Ricardo Alvaro Lohmann

Pourquoi ne pas définir la propriété color lorsque vous insérez la série de données dans le graphique? Sans voir ce que vous utilisez pour construire votre objet série, je ne peux vous fournir que du code 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étraitez les éléments de la série de données. Voir this question pour un formatage explicite. Vous pouvez définir la propriété color d'une série. Vous ne devez pas dépendre de la liste de couleurs HighCharts par défaut ni d'une liste de couleurs personnalisée, comme décrit dans une autre réponse. Notez que la propriété color ne figure pas dans l'API HighCharts reference mais vous pouvez l'utiliser.

0
wergeld

L'instruction return que vous avez là-bas revient de la fonction transmise à la fonction each, pas de la fonction color. En outre, il n'est pas nécessaire d'utiliser un boîtier de commutateur pour cela en JavaScript.

EDIT: Essayez quelque chose comme ça

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

Votre code ne dit pas vraiment ce qu'est ret. Je ne suis donc pas sûr que le code ci-dessus fonctionne, mais il devrait vous donner une idée approximative de la façon dont cela peut être fait.

0
Jamie Wong