Question

图表调用JSON文件，其中包含字符串（颜色）和整数（计数）。我想根据JSON文件保存的内容更改饼图中每个切片的颜色。因此，如果JSON文件是[["Green",1],["Red",44],["Yellow",30]]，我希望“绿色”切片具有绿色...等颜色。我试过了：

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函数中的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);

    })

以下是整个脚本：

$（function（）{

$(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 - 饼图动态更改切片颜色

1 个答案: