Highcharts-餅圖動態更改切片顏色

Question

該圖表在JSON文件中調用，該文件包含一個字符串（顏色）和一個整數（計數）。 我想根據JSON文件的內容更改餅圖中每個切片的顏色。 因此，如果JSON文件為[["Green",1],["Red",44],["Yellow",30]]我希望“ Green”切片具有綠色...等。 我試過了：

plotOptions: {
    pie: {
        //colors: ['#739600', '#bb0826', '#fcc60A'],
        formatter: function () {
                if ('Green' === this.value) {
                    return '<span style="fill: #739600;">' + this.value + '</span>';
                } 
                else if ('Red' === this.value) {
                    return '<span style="fill: #bb0826;">' + this.value + '</span>';
                }
                else if ('Yellow' === this.value) {
                    return '<span style="fill: #fcc60A;">' + this.value + '</span>';
                }
            }, ...

我沒有按預期工作。 http://jsfiddle.net/LazerickL/bvaxmcLr/4/

任何幫助，將不勝感激。

UPDATE

我必須重組JavaScript才能調用$ .getJSON函數。 那么，我將如何繼續為下面的最新代碼實現顏色切片？ 謝謝你的幫助！

$(document).ready(function() {
var options = {
    chart: {
        renderTo: 'containter',      
        defaultSeriesType: 'pie',
        options3d: {
            enabled: true,
            alpha: 45
        }
    },
    title: {
        text: null                  
    },

    credits: {
        enabled: false              
    },
    tooltip: {
    pointFormat:                    
    '{series.name}: <b>{point.y}</b>'
},

plotOptions: {
    pie: {
        //colors: ['#739600', '#bb0826', '#fcc60A'],
        allowPointSelect: true,
        cursor: 'pointer',
        depth: 30, 
        showInLegend: true,         
        dataLabels: {
            enabled: true,
            color: '#000000',
            connectorColor: '#000000',
            formatter: function () {
                return '<b>' + this.point.name + '</b>: ' + this.point.y;
            }
        }
    }
},
    series: [{
        type: 'pie',
        name: 'Amount',
        data: []
    }]
}

$.getJSON("js/test.json", function (json) {
    options.series[0].data = json;
    var chart = new Highcharts.Chart(options);
});

}）;

Answer 1

要在餅子上設置顏色，您需要更新將事物推入數據數組的方式以包括餅圖的顏色。 我可以通過在數據數組中添加一個字段來完成此操作，但是如果願意，可以使用函數中的if語句。 這是更新的小提琴： http : //jsfiddle.net/bvaxmcLr/8/

同樣，格式化程序功能的放置無效。 據我所知，該格式化程序javascript僅適用於數據標簽。

腳本的重要更改是刪除了格式化程序功能，並對其進行了更新，以將顏色值壓入每個數據點：

  var data={'d':[
        {'Status_Color':'Green', 'Corrective_Action_ID':3},
        {'Status_Color':'Red', 'Corrective_Action_ID':5},
        {'Status_Color':'Yellow', 'Corrective_Action_ID':10},
    ]};
     $.each(data.d, function (key, value) {
        var colorVal = '';
        if(value.Status_Color=='Green'){
            colorVal = '#739600';
        }
        if(value.Status_Color=='Red'){
            colorVal = '#bb0826';
        }
        if(value.Status_Color=='Yellow'){
            colorVal = '#fcc60A';
        }

        var temp = {name:value.Status_Color, color:colorVal, y:value.Corrective_Action_ID};
        options.series[0].data.push(temp);

    })

這是整個腳本：

$（函數（）{

$(document).ready(function () {

    var options = {

    chart: {
        renderTo: 'container',
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45
        }
    },
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    credits: {
        enabled: false
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.y:.1f}</b>'
    },
    plotOptions: {
        pie: {

            depth: 45,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: true
        }
    },
    series: [{
        type: 'pie',
        name: 'Amount',
        data: []
    }]

    }
    var data={'d':[
        {'Status_Color':'Green', 'Corrective_Action_ID':3},
        {'Status_Color':'Red', 'Corrective_Action_ID':5},
        {'Status_Color':'Yellow', 'Corrective_Action_ID':10},
    ]};
     $.each(data.d, function (key, value) {
        var colorVal = '';
        if(value.Status_Color=='Green'){
            colorVal = '#739600';
        }
        if(value.Status_Color=='Red'){
            colorVal = '#bb0826';
        }
        if(value.Status_Color=='Yellow'){
            colorVal = '#fcc60A';
        }

        var temp = {name:value.Status_Color, color:colorVal, y:value.Corrective_Action_ID};
        options.series[0].data.push(temp);

    })

    chart = new Highcharts.Chart(options);

});

}）;