Блог

Я пытаюсь выполнить детализацию 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/

Детализация от 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