<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<link
rel="icon"
href="https://static.jianshukeji.com/hcode/images/favicon.ico"
/>
<script src="https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/drilldown.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div
id="container"
style="min- 310px; height: 400px; margin: 0px auto; overflow: hidden;"
></div>
<script>
$('#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],
{
name: 'Oranges',
y: 2,
drilldown: 'third-leves'
}
]
},
{
id: 'cars',
data: [['Toyota', 4], ['Opel', 2], ['Volkswagen', 2]]
},
{
id: 'third-leves',
data: [
['Toyota', 4],
['Opel', 2],
{ name: 'Volkswagen', y: 2, drilldown: 'ttt' }
]
},
{
id: 'ttt',
data: [['x', 1], ['xx', 2], ['xxx', 3]]
}
]
}
});
</script>
</body>
</html>