Débouchage de bulles Highcharts de base

Question

Je suis nouveau chez Highcharts. J'essaye de créer un diagramme de bulle de drilldown.

Je pris la drilldown colonne de base comme point de départ,

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/

chart: { 
    type: 'column' 
}, 
title: { 
    text: 'Basic drilldown' 
}, 
xAxis: { 
    type: 'category' 
}, 

legend: { 
    enabled: false 
}, 

plotOptions: { 
    series: { 
    borderWidth: 0, 
    dataLabels: { 
     enabled: true 
    } 
    } 
}, 

series: [{ 
    name: 'Things', 
    colorByPoint: true, 
    data: [{ 
    name: 'Animals', 
    y: 5, 
    drilldown: 'animals' 
    }, { 
    name: 'Fruits', 
    y: 2, 
    drilldown: 'fruits' 
    }, { 
    name: 'Cars', 
    y: 4, 
    drilldown: 'cars' 
    }] 
}], 
drilldown: { 
    series: [{ 
    id: 'animals', 
    data: [ 
     ['Cats', 4], 
     ['Dogs', 2], 
     ['Cows', 1], 
     ['Sheep', 2], 
     ['Pigs', 1] 
    ] 
    }, { 
    id: 'fruits', 
    data: [ 
     ['Apples', 4], 
     ['Oranges', 2] 
    ] 
    }, { 
    id: 'cars', 
    data: [ 
     ['Toyota', 4], 
     ['Opel', 2], 
     ['Volkswagen', 2] 
    ] 
    }] 
} 

et édité un peu, pour obtenir ce,

http://jsfiddle.net/Slate_Shannon/kdwa9x7v/1/

$(function() { 

$('#container').highcharts({ 
chart: { 
    type: 'bubble' 
}, 
title: { 
    text: 'Basic drilldown' 
}, 
xAxis: { 
    type: 'linear' 
}, 

legend: { 
    enabled: false 
}, 

plotOptions: { 
    series: { 
    borderWidth: 0, 
    dataLabels: { 
     enabled: true 
    } 
    } 
}, 

series: [{ 
    name: 'Things', 
    colorByPoint: true, 
    data: [{ 
    name: 'Animals', 
    x: 4, 
    y: 5, 
    z: 10, 
    drilldown: 'animals' 
    }, { 
    name: 'Fruits', 
    x: 14, 
    y: 20, 
    z: 20, 
    drilldown: 'fruits' 
    }, { 
    name: 'Cars', 
    x: 8, 
    y: 9, 
    z: 7, 
    drilldown: 'cars' 
    }] 
}], 
drilldown: { 
    series: [{ 
    id: 'animals', 
    data: [ 
     ['Cats', x: 5, y: 9, z: 7], 
     ['Dogs', x: 8, y: 8, z: 9], 
     ['Cows', x: 1, y: 5, z: 2], 
     ['Sheep', x: 4, y: 7, z: 2], 
     ['Pigs', x: 4, y: 5, z: 7] 
    ] 
    }, { 
    id: 'fruits', 
    data: [ 
     ['Apples', x: 2, y: 9, z: 6], 
     ['Oranges', x: 6, y: 5, z: 1] 
    ] 
    }, { 
    id: 'cars', 
    data: [ 
     ['Toyota', x: 2, y: 8, z: 7], 
     ['Opel', x: 8, y: 2, z: 4], 
     ['Volkswagen', x: 4, y: 4, z: 4] 
    ] 
    }] 
} 
}); 
}); 

Tous Je l'ai fait était

• changement du type de graphique à la "bulle",
• ajouter les x et les données z,
• changement à la xaxis "linéaire"

Et ça ne fonctionne pas.

Vous voyez le problème?

Merci beaucoup!

Bonne journée.

Answer 1

La mise en forme de vos données de recherche est incorrecte, comme indiqué dans la console. Actuellement vous avez:

data: [ 
    ['Cats', x: 5, y: 9, z:7], 
    ['Dogs', x: 8, y: 8, z:9], 
    // ... 
] 

Ceci est à mi-chemin entre une déclaration de tableau et une déclaration d'objet. Je vous suggère de passer à chaque élément étant un objet, comme celui-ci:

data: [ 
    { name: 'Cats', x: 5, y: 9, z:7 }, 
    { name: 'Dogs', x: 8, y: 8, z:9 }, 
    // ... 
] 

Deuxièmement, vous n'avez pas inclus le module plus Highcharts-requis qui comprend le type de graphique à bulles. Vous pouvez le faire comme ceci:

<script src="https://code.highcharts.com/highcharts-more.js"></script> 

Voir this updated JSFiddle pour un exemple de base de la façon dont cela peut fonctionner.