Highcharts - 饼图动态更改切片颜色-Java 学习之路

图表调用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);
});

}）;

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);

});

}）;

回复于 2024-04-20T06:31:08+08:00

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

1 回答

相关问题