Highcharts solidgauge 与向下钻取

Question

我正在尝试将solidgauge 作为第一级向下钻取到条形图作为第二级，但效果不佳。 你能帮帮我吗？

#container {
	margin: 0 auto;
	max-width: 400px;
	min-width: 380px;
}

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

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

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


<div id="container"></div>

（单击其中一个仪表盘以显示向下钻取应显示条形图，但会显示一小部分仪表盘。）

https://jsfiddle.net/JMarcia/5c1wv8t0/42/

Answer 1

不支持从solid-gauge 向下钻取到其他系列类型。您可以在点击事件中创建新图表或切换容器可见性以模拟向下钻取。

var solidGaugeOptions = {
    ...,

    plotOptions: {
        solidgauge: {
            ...,
            events: {
                click: function() {
                    document.getElementById('back').style.display = "block";
                    Highcharts.chart('container', columnsOptions);
                }
            }
        }
    }
}

var columnsOptions = {
    series: [...]
}

Highcharts.chart('container', solidGaugeOptions);

document.getElementById('back').addEventListener('click', function() {
    this.style.display = "none";
    Highcharts.chart('container', solidGaugeOptions);
});

现场演示：https://jsfiddle.net/BlackLabel/4n7tvdLh/

API 参考：https://api.highcharts.com/class-reference/Highcharts#.chart