簡體   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