javascript - Highcharts:JSON 对象中的数据无法正常工作

Question

我正在使用以下 JSON 对象设置气泡图:(在代码中名为donorArray)

{1:{id:1, x:10, y:"88.88", z:"88.88", url:"http://ati.publishwhatyoufund.org/donor/usmcc/"}, 2:{id:2, x:10, y:"87.26", z:"87.26", url:"http://ati.publishwhatyoufund.org/donor/gavi/"}, 3:{id:3, x:10, y:"83.49", z:"83.49", url:"http://ati.publishwhatyoufund.org/donor/ukdfid/"}, 4:{id:4, x:10, y:"83.38", z:"83.38", url:"http://ati.publishwhatyoufund.org/donor/undp/"}, 5:{id:5, x:10, y:"73.81", z:"73.81", url:"http://ati.publishwhatyoufund.org/donor/world-bank-ida/"}, 6:{id:6, x:10, y:"70.65", z:"70.65", url:"http://ati.publishwhatyoufund.org/donor/global-fund/"}, 7:{id:7, x:10, y:"63.70", z:"63.70", url:"http://ati.publishwhatyoufund.org/donor/afdb/"}, 8:{id:8, x:10, y:"62.58", z:"62.58", url:"http://ati.publishwhatyoufund.org/donor/canada/"}, 9:{id:9, x:10, y:"60.38", z:"60.38", url:"http://ati.publishwhatyoufund.org/donor/sweden/"}, 10:{id:10, x:10, y:"57.64", z:"57.64", url:"http://ati.publishwhatyoufund.org/donor/asdb/"}, 11:{id:11, x:10, y:"57.11", z:"57.11", url:"http://ati.publishwhatyoufund.org/donor/iadb/"}, 12:{id:12, x:10, y:"54.24", z:"54.24", url:"http://ati.publishwhatyoufund.org/donor/ececho/"}, 13:{id:13, x:10, y:"52.11", z:"52.11", url:"http://ati.publishwhatyoufund.org/donor/ecdevco/"}, 14:{id:14, x:10, y:"51.14", z:"51.14", url:"http://ati.publishwhatyoufund.org/donor/ecfpi/"}, 15:{id:15, x:10, y:"50.70", z:"50.70", url:"http://ati.publishwhatyoufund.org/donor/denmark/"}, 16:{id:16, x:10, y:"49.37", z:"49.37", url:"http://ati.publishwhatyoufund.org/donor/netherlands/"}}

这是我的实际代码:

jQuery(document).ready(function($){ 
    scores = [];
    for(i in donorArray){               
        score = parseFloat(donorArray[i].score);
        score = Math.round(score * 100) / 100;
    }

    var $report= $('#report');
    $report.html('Donor Scoring');

    chart = new Highcharts.Chart({ 
        chart: {
            type: 'bubble',
            renderTo: 'graph',
            backgroundColor: 'transparent',
            events: {
                load: function() {
                    this.renderer.image('http://ati.publishwhatyoufund.org/wp-content/themes/ati/img/new_bg.png', 230, 20, 720, 720).add();  // add image(url, x, y, w, h)
                }       
            }
        },
        plotOptions: {
            bubble: {
                color: 'white',
                marker: {
                    fillColor: 'transparent'
                }
            },
            point: {
                allowPointSelect: false,                    
                events: {

                    mouseOver: function(event) {                                                                                        
                        this.css("border", "1px solid black");                              
                    },
                    mouseOut: function(event) {

                    },
                    click: function(event) {
                        if(!this.selected) {window.open(this.options.url,'_self' );}                                                                                            
                    },
                }
            }
        },  
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },

        yAxis: {
            gridLineColor: 'transparent',                       
            lineColor: 'transparent',          
            labels: {
                enabled: false
            }   
        },
        xAxis: {

            gridLineColor: 'transparent',                       
            lineColor: 'transparent',          
            labels: {
                enabled: false
            },
             offset: 0,
                margin: 0   
        },
        legend: {
            enabled: false
        },
        series: {
                data: donorArray
            }
        });
});

它渲染背景和图形容器等，但没有出现数据点(气泡)。

你能发现任何明显的错误吗？

谢谢

雅克

Answer 1

首先，这部分代码是完全错误的:

scores = [];
for(i in donorArray){               
    score = parseFloat(donorArray[i].score);
    score = Math.round(score * 100) / 100;
}

我在你的donorArray对象中没有看到任何score，而且，它会覆盖score，变成数字/字符串，而不是添加到数组中。应该是:

scores = [];
var temp;
for(i in donorArray){               
    temp = parseFloat(donorArray[i].score);
    scores.push(Math.round(temp * 100) / 100);
}

现在，正如@Abdul Jabbar所说，您的数据格式是错误的。不适合 Highcharts 格式。工作示例:http://jsfiddle.net/2ra0gnd0/2/和代码:

scores = [];
var temp;
var point;
var dataForChart = [];
for(i in donorArray){     
    point = donorArray[i];
    temp = parseFloat(donorArray[i].score);
    scores.push(Math.round(temp * 100) / 100);
    dataForChart.push({
        x:  point.x,
        id: point.id,
        y: parseFloat(point.y),
        z: parseFloat(point.z),
        url: point.url
    });
}

最后要解决的问题是系列:

    series: {
        data: donorArray
    }

当然应该是对象数组，而不是对象，所以应该是:

    series: [{
        data: dataForChart
    }]