Highcharts饼图数据格式

Highcharts Pie Chart data formatting

本文关键字：数据格式 Highcharts      更新时间：2023-09-26

我有一个饼状图，它从文件中获取数据。原始形式是data:

[{"name":"Dual","load":"20"},{"name":"Gas","load":"35"},{"name":"Other_Fossil_Fuels","load":"15"},{"name":"Nuclear","load":"12"},{"name":"Hydro","load":"8"},{"name":"Wind","load":"10"},{"name":"Other_Renwables","load":"10"}]

我正试图使一种方法，格式这个数据正确，使它可以在饼状图中使用。然而，只有Names正确通过，所有百分比设置为0。我有一种感觉，这是因为原始数据被保存为字符串。但是在推入之前对数据使用parseInt()并没有帮助，===检查返回num。这是我想要实现的代码。

function setPieData(data){
    var json = JSON.parse(data); 
    var fuelTypes = [{name: 'Dual',load:[]},
                    {name: 'Gas', load:[]},
                    {name: 'Other_Fossil_Fuels', load:[]},
                    {name: 'Nuclear', load: []},
                    {name: 'Hydro', load: []},
                    {name: 'Wind', load: []},
                    {name: 'Other_Renwables', load:[]}];
    for(i=0; i < json.length; i++){
        if(json[i].name == fuelTypes[i].name){
            fuelTypes[i].load.push(parseInt(json[i].load));
        }
        if(fuelTypes[i].load === parseInt(fuelTypes[i].load, 10)){
            alert("not num");
        }else{
            alert("num");
        }
    }
    drawChart(fuelTypes);
}
function drawChart(stuff){
    var globalDate = new Date();
    var dMth = globalDate.getMonth() + 1;
    var dDay = globalDate.getDate();
    var dYr = globalDate.getFullYear();
    var dStr = dMth + '/' + dDay + '/' + dYr;
    title = "Real-time Fuel Mix " + dStr;
    var seriesData= stuff;

    Highcharts.setOptions({
         colors: ['#C00000', '#FF0000', '#7F7F7F', '#FFC000', '#4F81BD', '#00B050', '#92D050']
        });
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: title
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                showInLegend: true
            }
        },
        series: [{
            name: "MI Power",
            colorByPoint: true,
            data: stuff
        }]

创建一个数组并按如下方式推送数据

 var dataPie =[]; 
 var abc =your data //your json
 $.each(abc,function(i,el)
 {
  dataPie.push({name :el.name,y: parseInt(el.load)});
});

在drawChart函数中使用dataPie

相关文章：