当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Highcharts: Data not working correctly from JSON object

问题描述:

I am setting up a bubble chart with the following JSON object: (named donorArray in the code)

{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/"}}

Here is my actual code:

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

}

});

});

It renders the background and the graph container etc, but no datapoints(bubbles) appear.

Can you spot any obvious errors?

Thanks

Jacques

网友答案:

First of all, that part of code is properly wrong:

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

I don't see any score in your donorArray objects, also, it will overwrite score, to become number/string, not adding to the array. Should be rather:

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

Now, as @Abdul Jabbar said, your data format is just wrong. Doesn't suit Highcharts formats. Working example: http://jsfiddle.net/2ra0gnd0/2/ and code:

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
    });
}

And last thing, to be fixed, is series:

    series: {
        data: donorArray
    }

Should be of course an array of objects, not an object, so should be:

    series: [{
        data: dataForChart
    }]
分享给朋友:
您可能感兴趣的文章:
随机阅读: