Basic Highcharts Bubble Drilldown

Question

Ich bin neu bei Highcharts. Ich versuche ein Drilldown-Blasendiagramm zu erstellen.

nahm ich die grundlegende Säule Drill-Down als Ausgangspunkt,

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] 
    ] 
    }] 
} 

und es ein wenig bearbeitet, diese

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

Alle zu bekommen, Ich tat war

• Änderung der Diagrammtyp "Blase",
• die x- und z-Daten hinzufügen,
• Änderung der x-Achse auf "linear"

Und es funktioniert nicht.

Können Sie das Problem sehen?

Vielen Dank!

Guten Tag.

Answer 1

Die Formatierung Ihrer Drilldown-Daten ist falsch, wie in der Konsole angedeutet. Derzeit haben Sie:

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

Dies ist die Hälfte zwischen einer Array-Deklaration und einer Objektdeklaration. Ich würde vorschlagen, die jedem Element-Wechsel ein Objekt ist, wie folgt aus:

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

Zweitens Sie haben nicht die erforderliche Highcharts-mehr-Modul enthalten, das die Blasendiagrammtyp enthält. Sie können das tun dies wie:

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

Siehe this updated JSFiddle für ein einfaches Beispiel dafür, wie es funktionieren kann.