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/

如有任何帮助，我们将不胜感激。

更新

我不得不重组我的 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 语句。这是更新后的 fiddle：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);

});

});

Highcharts - 饼图动态改变切片颜色

Highcharts - Pie Chart change slice colors dynamically

javascript

jquery

charts

json