Highcharts大树形图,如何动态更改allowDrillToNode标志?

问题描述 投票:1回答:1

我这样做是为了显示/隐藏数据标签,就像我对formatter所做的那样。现在,我想在单击按钮并且不希望再次渲染图表时手动更改allowDrillToNode标志。

self.Model.marketMapChartInfo = {
        series: [{
            type: "treemap",
            layoutAlgorithm: 'squarified',
            allowDrillToNode: true,
            layoutStartingDirection: "horizontal",
            dataLabels: {
                enabled: true,
                useHTML: true,
                style: {
                    fontFamily: 'isw',
                    fontSize: '13px',
                },
                formatter: null
            },
            levelIsConstant: false,
            levels: [{
                level: 1,
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    style: {
                        fontFamily: 'isw',
                        fontSize: '13px',
                    },
                    formatter: null
                },
                borderWidth: 1
            }],
            data: null,
            events: {
                click: function (event) {
                    console.log("Node clicked!");
                }
            }
        }]
    }

    self.Model.MarketMapLargeTreeMap = Highcharts.chart('market-map-large-tree-map', self.Model.marketMapChartInfo);

这些是单击按钮时执行的代码。使用这些代码,我可以处理是否标记的显示,但不能用于allowDrillToNode

标志。
self.Model.marketMapChartInfo.series[0].dataLabels.formatter = function () {
            if (self.Model.allocationParam != "sector") {
                return '<div class="text-center" dir="auto"><span>' + this.point.name + '</span>' +
                    '<br>' +
                    '<span>' + Highcharts.numberFormat(this.point.value, 0) + '</span></div>';
            } else {
                return null;
            }
        };
        self.Model.marketMapChartInfo.series[0].levels[0].dataLabels.formatter = function () {
            if (self.Model.allocationParam == "sector") {
                return '<div class="text-center" dir="auto"><span>' + this.point.name + '</span>' +
                    '<br>' +
                    '<span>' + Highcharts.numberFormat(this.point.value, 0) + '</span></div>';
            } else {
                return null;
            }
        };
        $timeout(function () {
            self.Model.MarketMapLargeTreeMap.series[0].isDirty = true;
            self.Model.MarketMapLargeTreeMap.redraw();
        }, 1);

jsFiddle

我这样做是为了显示/隐藏数据标签,就像格式化程序一样。现在,我想在单击按钮并且不希望再次呈现图表时手动更改allowDrillToNode标志。 self.Model ....

highcharts
1个回答
0
投票

从源代码:https://github.com/highcharts/highcharts/blob/master/ts/modules/treemap.src.ts#L1002看来您需要更新allowTraversingTree属性:

© www.soinside.com 2019 - 2024. All rights reserved.