Drilldown plusieurs niveaux Highchart
Highchart nous plonge dans plusieurs niveaux. Existe-t-il déjà un exemple dans Highchart?
Code actuellement utilisé:
$(div).highcharts({
chart: {type: 'column'},
credits: {enabled: false},
title: {text: title},
xAxis: {
categories: [
'Instroom',
'Rijdend',
'Úitstroom'
]
},
yAxis: {title: {text: ytitle}},
legend: {enabled: true},
plotOptions: {series: { borderWidth: 1, dataLabels: {enabled: true,}}},
series: first,
drilldown: {
series: drillDownObject(second)
}
});
Il est possible d'ajouter simplement toutes les séries d'exploration, puis de créer une connexion entre le point et l'exploration. Voir: http://jsfiddle.net/6LXVQ/2/
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}]
}],
drilldown: {
series: [{
id: 'animals',
name: 'Animals',
data: [{
name: 'Cats',
y: 4,
drilldown: 'cats'
}, ['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'cats',
data: [1, 2, 3]
}]
}
Pour un diagramme à secteurs multi-niveaux, consultez http://jsfiddle.net/bge14m3a/1/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Deep 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: 'Food',
y: 4,
drilldown: 'food'
}]
}],
drilldown: {
series: [{
id: 'food',
name: 'Food',
data: [{
name: 'Apple',
y: 1.5,
drilldown: 'Apple'
},
['Banana', 1],
['Peer', 0.5],
['Pineapple', 1]
]
}, {
id: 'Apple',
data: [['1/6' ,1],
['1/3' , 2],
['1/2' , 3]]
},{
id: 'animals',
name: 'Animals',
data: [{
name: 'Cats',
y: 5,
drilldown: 'cats'
}, ['Dogs', 2],
['Cows', 1],
['Sheep', 1],
['Pigs', 1]
]
}, {
id: 'cats',
data: [1, 2, 3]
}]
}
})
});
<script src="js/jquery-2.0.2.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/drilldown.js"></script>
<script>
var chartSeriesData = [];
var chartDrilldownData = [];
$.ajax({
type: 'GET',
url: 'abc.json',
success: function(data) {
var agentJson = data;
for (var i = 0;i <agentJson.countryInfo.length; i++)
{
var series_name = agentJson.countryInfo[i].name;
var drill_id = agentJson.countryInfo[i].drilldown;
var series_data = agentJson.countryInfo[i].y;
var drill_data = agentJson.countryInfo[i].data;
chartSeriesData.Push({
name: series_name,
y: parseFloat(series_data),
drilldown : drill_id
});
chartDrilldownData.Push({
data : drill_data,
id: drill_id,
name: series_name,
});
}
/// END FOR LOOP
$('#countryInfo').highcharts({
credits: {
enabled: false
},
chart: {
type: 'pie',
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
title: {
text: 'Human Resources'
},
subtitle: {
text: ''
},
plotOptions: {
series: {
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
style: {
color: '#000',
fontWeight: 'bold',
fontSize: '12px',
textShadow: "0px #ffffff"
}
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Country',
colorByPoint: true,
data: chartSeriesData
}],
drilldown: {
series: chartDrilldownData
}
});
}
});
</script>
and your json file look likes:
{"countryInfo":[{"name":"Firefox","y":4,"drilldown":"Firefox","data":[["desktop",1]]},{"name":"Chrome","y":176,"drilldown":"Chrome","data":[["desktop",1],["desktop",18]]}]}
Voici un exemple qui conserve les noms sur l’axe . (Les travaux d’exploration fonctionnent sur "Animaux"> "Mammifères")
Les options de forage ressemblent à ceci:
drilldown: {
series: [{
id: 'animals',
data: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
}, {
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
},
...
Vous devez écrire un code personnalisé pour plusieurs explorations. Nous pouvons y parvenir en stockant des séries de données dans chaque colonne (premiers graphiques) et en transmettant cette série au graphique suivant, etc.