Javascript 如何在Highchart中的堆叠柱折线图中进行向下钻取

我在使用海图方面是新手。我能够创建一个堆叠的Col-line图表。现在我想创建它的深入分析。我能够获取单击事件，并在相同位置从它生成一个新图表，但使用该事件，我无法钻回到上一个图表。所以我需要使用它的向下钻取属性。 这是我的图表代码。 HTML部分-

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
</div>

---

如果要深入到折线图，只需在options.series而不是options.chart中设置类型

$（函数（）{
//创建图表
$（“#容器”）。高图({
标题：{
文本：“基本向下展开”
},
xAxis：{
类型：“类别”
},
图例：{
已启用：true
},
打印选项：{
系列：{
边框宽度：0，
数据标签：{
启用：对，
风格：{
颜色：'白色'，
textShadow:'0 0 2px黑色，0 0 2px黑色'
}
},
堆叠：“正常”
}
},
系列：[{
键入：“列”，
名称：'事物'，
数据：[{
名称：“动物”，
y:5，
深入研究：“动物”
}, {
名称：'水果'，
y:2，
深入研究：“水果”
}, {
名称：“汽车”，
y:4，
深入调查：“汽车”
}]
}, {
键入：“列”，
名称：“Things2”，
数据：[{
名称：“动物”，
y:1,，
深入研究：“动物2”
}, {
名称：'水果'，
y:5，
深入研究：“水果2”
}, {
名称：“汽车”，
y:2，
深入研究：“cars2”
}]
}],
向下展开：{
activeDataLabelStyle：{
颜色：'白色'，
textShadow:'0 0 2px黑色，0 0 2px黑色'
},
系列：[{
id:'动物'，
名称：“动物”，
数据：[
[Cats'，4]，
[Dogs'，2]，
['Cows'，1]，
['Sheep'，2]，
[‘猪’，1]
]
}, {
id:'水果'，
名称：'水果'，
数据：[
[‘苹果’，4]，
[“橙子”，2]
]
}, {
id:'汽车'，
名称：“汽车”，
数据：[
[Toyota'，4]，
[‘欧宝’，2]，
[大众汽车，2]
]
}, {
id:‘动物2’，
名称：'Animals2'，
数据：[
[Cats'，3]，
[Dogs'，5]，
[Cows'，6]，
['Sheep'，2]，
[‘猪’，2]
]
}, {
id:‘水果2’，
名称：“水果2”，
数据：[
[‘苹果’，1]，
[橙子，5]
]
}, {
id:'cars2'，
名称：'Cars2'，
数据：[
[Toyota'，2]，
[‘欧宝’，3]，
[大众汽车，2]
]
}]
}
})
});
我在这里尝试过：但我想点击分类
Highcharts.chart('container', {
chart: {
    zoomType: 'xy'
},
title: {
    text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
    text: 'Source: WorldClimate.com'
},
xAxis: [{
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    crosshair: true
}],
yAxis: [{ // Primary yAxis
    labels: {
        format: '{value}°C',
        style: {
            color: Highcharts.getOptions().colors[1]
        }
    },
    title: {
        text: 'Temperature',
        style: {
            color: Highcharts.getOptions().colors[1]
        }
    }
}, { // Secondary yAxis
    title: {
        text: 'Rainfall',
        style: {
            color: Highcharts.getOptions().colors[0]
        }
    },
    labels: {
        format: '{value} mm',
        style: {
            color: Highcharts.getOptions().colors[0]
        }
    },
    opposite: true
}],
tooltip: {
    shared: true
},
plotOptions: {
    column: {
        stacking: 'normal',
        cursor: 'pointer'
    }
},
legend: {
    layout: 'vertical',
    align: 'left',
    x: 120,
    verticalAlign: 'top',
    y: 100,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
    name: 'Rainfall',
    type: 'column',
    yAxis: 1,
    drilldown: true,
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
        valueSuffix: ' mm'
    }

},{
    name: 'Wind',
    type: 'column',
    yAxis: 1,
    drilldown: true,
    data: [25, 20, 30, 12, 14, 17, 13, 14, 21, 19, 25.6, 24.4],
    tooltip: {
        valueSuffix: ' mm'
    }

}, {
    name: 'Temperature',
    type: 'spline',
    drilldown: true,
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    tooltip: {
        valueSuffix: '°C'
    }
  }]
});