highcharts - Highcharts 向下钻取设置 x 轴 setExtremes

Question

我有 3 层向下钻取的 highcharts。我只想将自动滚动放在向下钻取的第二层，而不是在其他层中。

我的小提琴是：https ://jsfiddle.net/ofam6c04/

      events: {
                drilldown: function (e) {
                var chart = this;
                    counter = 0;
                    range = 9;
                    max = 0;
                    clearInterval(interval);

                    equ_counter++;
                    console.log('drilldown', equ_counter);
                    setTimeout(function(){ 
                        chart.xAxis[0].setExtremes(counter, range);
                    }, 200);


                    if (equ_counter == 1) {
                        max = e.point.sites;
                        console.log('max', max);

                        interval = setInterval(function () {
                            console.log('counter', counter);
                            if (counter >= (max - d_range)) {
                                if (counter % 2 == 0) {
                                    counter = 0;
                                    range = 9;
                                } else {
                                    counter = 1;
                                    range = 10;
                                }
                            }
                            chart.xAxis[0].setExtremes(counter, range);
                            counter++;
                            range++;
                        }, 3000);
                    }
                },

我有一些问题如下所述。

1. 进入第 2 层后，有时会显示一些不需要的 0（零）。
2. 假设我在第 2 层有 57 个站点，我想移动到 10 个组（每次 10 个站点轮换）并假设最后一次轮换，如果剩余 7 个站点，则只需要显示 7 个条形图。
3. 完成 57 个站点轮换后，从第一个站点重定向自动。

• 注意：所有都应该只在第 2 层完成。如果我去第 3 层或第 1 层，则不需要旋转。再次进入第 2 层，再次从第一阶段或最后阶段开始计数。

标签： highcharts

Answer 1

1. 看起来像是回归，我在 Highcharts Github 问题频道上报告了它，您可以在其中关注此线程：https ://github.com/highcharts/highcharts/issues/15663

作为一种解决方法，如果您不需要最新功能，您可以使用以前版本的 Highcharts：

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

演示：https ://jsfiddle.net/BlackLabel/bqvexo92/

---

或者使用数据标签而不是堆栈标签呈现此图表：

plotOptions: {
    column: {
        borderColor: 'none',
        grouping: false,
        dataLabels: {
            enabled: true,
            color: '#3D3D3D',
            style: {
                fontWeight: 'bold',
                textOutline: false,
                fontSize: '12px'
            },
        }
    }
},

演示：https ://jsfiddle.net/BlackLabel/nwsbom5z/

---

2. 这是我对如何实现这种轮播的想法：

演示：https ://jsfiddle.net/BlackLabel/62u0rf5e/