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

时间:2018-11-02 14:47:29

标签: javascript highcharts

我有一个具有向下钻取功能的分组列highchart。这是针对学区的,因此我的分组列是小学,初中和高中级别统计的上一年/本年。您可以单击任何列以进行深入研究,并查看各个学校的表现。导出图表后,我试图根据选择的学校级别进行一些更改-图表的宽度和高度,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
    }
})

1 个答案:

答案 0 :(得分:0)

昨天我在highcharts社区委员会上问了这个问题,有人回答了这个问题...基本上,我需要在图表事件部分中添加.update()。我已经做完了,现在一切正常!!

以下是答案的链接和有效的jsFiddle