Highcharts solidgauge with drilldown

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