Question

我有一张饼图，可以从文件中获取数据。在原始格式中，这是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
        }]

Answer 1

创建一个数组并推送您的数据，如下所示

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

在drawChart函数中使用dataPie。

见工作fiddle here

Highcharts饼图数据格式

1 个答案: