javascript - highcharts: 円グラフの色を動的に定義します

Question

タイプに応じて各セリアの色を動的に定義しようとしています。以下は、動作しない私のコードですが、私がやろうとしていることを示しています。特定のタイプの色を定義したいと思います。

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;
                    })()
                }]
            });
        });
    });


}

score 41 · Accepted Answer

円グラフの場合、スライスの色を内に設定する必要があります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']
        }
    ]
}]

ここで動作することがわかります。

score 0 · Accepted Answer

そこにあるステートメントは、カラー関数ではなく、関数returnに渡される関数から返されます。eachまた、JavaScript ではこれに switch ケースを使用する必要はありません。

編集：このようなことを試してください

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あるかは明確ではないので、上記のコードが機能するかどうかはわかりませんが、どのように実行できるかについて大まかなアイデアが得られるはずです。

score 0 · Accepted Answer

データ系列をチャートにプッシュするときに color プロパティを設定しないのはなぜですか? シリーズオブジェクトを構築するために何を使用しているかを確認せずに、いくつかの擬似コードを提供することしかできません:

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リファレンスには記載されていませんが、使用できることに注意してください。

score -1 · Accepted Answer

色の自動選択に独自のライブラリを使用しているため、色のプロパティを指定せずにHighchartsを使用します。以下を使用して、それがあなたのために働くことを願っています

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

ハイチャートのカスタムカラーを設定できますsetOption function

Highcharts.setOptions({
  colors: ['#F64A16', '#0ECDFD', '#FFF000']
});

javascript - highcharts: 円グラフの色を動的に定義します

4 に答える 4

Related

Reference