Highcharts 更新动态变化的导出值的最佳方法？

Question

我有一个具有向下钻取功能的分组列高图。这是针对学区的，所以我的分组列是小学、初中和高中水平统计数据的上一年/当年。您可以单击任何列进行深入研究，并查看各个学校的表现。导出图表后，我尝试根据选择的学校级别进行一些更改——图表的宽度和高度、x 轴类别和类别旋转。

我希望能够在 chart.events 部分中动态地进行这些更改，但它似乎不起作用。我最初是初始图表构建之外的动态变量，并且正在使用这些值。显然我做的不对。有没有更简单的方法来更新我不知道的导出方法的这些值？

我已经创建了图表的jsFiddle，这样您就可以看到正在发生的事情......您可以一如既往地提供任何帮助，我们将不胜感激！

cats = categoriesSL.slice();
categoryHeight = 300;
categoryWidth = 500;
categoryRotation = 0;

//Build The Chart
var refChart = new Highcharts.chart('ctReferrals', {
    chart: {
        backgroundColor: 'whiteSmoke',
        events: {
            drilldown: function () {
                categoryHeight = 400;
                categoryRotation = 90;

                switch (this.ddDupes[0]) {
                    case 'elem':
                    case 'elem2':
                        cats = categoriesElem.slice();
                        categoryCount = categoriesElem.length - 1;
                        categoryWidth = 6000;
                        refChart.xAxis[0].setCategories(categoriesElem);
                        break;
                    case 'mid':
                    case 'mid2':
                        cats = categoriesMid.slice();
                        categoryCount = categoriesMid.length - 1;
                        categoryWidth = 2500;
                        refChart.xAxis[0].setCategories(categoriesMid);
                        break;
                    case 'high':
                    case 'high2':
                        cats = categoriesHigh.slice();
                        categoryCount = categoriesHigh.length - 1;
                        categoryWidth = 2000;
                        refChart.xAxis[0].setCategories(categoriesHigh);
                        break;
                    default:
                        break;
                }

                refChart.xAxis[0].update({ max: 5 }, true);

                this.update({
                    scrollbar: {
                        enabled: true,
                    }
                }, false);
            },
            drillupall: function () {
                cats = categoriesSL.slice();
                categoryHeight = 300;
                categoryWidth = 500;
                categoryRotation = 0;
                categoryCount = categoriesSL.length - 1;

                refChart.xAxis[0].setCategories(categoriesSL);
                refChart.xAxis[0].update({ max: categoriesSL.length - 1 }, true);

                this.update({
                    scrollbar: {
                        enabled: false
                    }
                }, false);
            }
        },
        type: 'column',
    },
    title: {
        text: title
    },
    subtitle: {
        text: subTitle
    },
    xAxis: {
        categories: categoriesSL,
        min: 0,
        max: categoriesSL.length - 1,
    },
    yAxis: [{
        title: {
            useHtml: true,
            text: '<strong># Referrals</strong>'
        }
    }],
    tooltip: {
        shared: true,
    },
    plotOptions: {
        column: {
            borderRadius: 5,
            dataLabels: {
                enabled: true,
            },
        }
    },
    series: [{
        name: dataLabels[0],
        data: pySL
    }, {
        name: dataLabels[1],
        data: cySL
    }],
    drilldown: {
        allowPointDrilldown: false,
        series: [
            pyElem,
            cyElem,
            pyMid,
            cyMid,
            pyHigh,
            cyHigh
        ]
    },
    exporting: {
        chartOptions: {
            chart: {
                width: categoryHeight,
                height: categoryWidth,
            },
            xAxis: [{
                categories: cats,
                labels: {
                    rotation: categoryRotation
                },
                max: categoryCount,
            }]
        },
    },
    credits: {
        enabled: false
    }
})

Answer 1

我昨天在 highcharts 社区板上问了这个问题，有人回答了这个问题……基本上我需要在图表事件部分添加 .update() 。我已经完成了，现在一切正常！！

这是答案的链接和有效的jsFiddle：