繁体   English   中英

Highcharts饼图数据格式

[英]Highcharts Pie Chart data formatting

我有一个饼图,可从文件中获取其数据。 以原始形式,这是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。

这里看到工作提琴

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM