Из следующей скрипки мы можем реализовать детализацию в highCharts: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/Drilldown/basic/
Код:
$(function () {
// Create the chart
$('#container').highcharts({
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]
]
}]
}
});
});
Но мое требование состоит в том, что когда вы выполняете детализацию, мне нужно показать несколько диаграмм, показывающих одни и те же данные, например, сплайн и гистограмму. Я пробовал много проб и ошибок, но не повезло. Можно ли реализовать такую функцию с помощью HighCharts или любых других плагинов jQuery? Пожалуйста, поделитесь своими мыслями.
Мой существующий график с HighCharts:
Это комбинация стержня и сплайна.
Когда я щелкаю полосу, это должно привести к следующему представлению детализации:
Пожалуйста, помогите достичь этого.