Основные Highcharts Bubble Drilldown

Question

Я новичок в Highcharts. Я пытаюсь создать диаграмму пузырьков Drilldown.

Я взял основную детализацию столбец в качестве отправной точки,

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

и редактировать его немного, чтобы получить это,

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

Все Я сделал это

• изменить тип диаграммы на «пузырь»,
• добавить данные х и г,
• Изменение Xaxis к «линейным»

И это не работает.

У вас проблема?

Спасибо большое!

Добрый день.

Answer 1

Форматирование данных детализации неверно, как указано в консоли. В настоящее время у вас есть:

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

Это на полпути между объявлением массива и объявлением объекта. Я хотел бы предложить переход к каждому пункту быть объектом, например:

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

Во-вторых, вы не включили нужный Highcharts-больше модуль, который включает в себя тип пузырьковой диаграммы. Вы можете сделать это так:

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

См this updated JSFiddle для основного примера того, как он может работать.