Highcharts большая карта дерева, как я могу динамически изменить флаг allowDrillToNode? - PullRequest
1 голос
/ 25 января 2020

Я делаю это для отображения / скрытия меток данных, что я делаю с 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

1 Ответ

1 голос
/ 27 января 2020

Исходный код: https://github.com/highcharts/highcharts/blob/master/ts/modules/treemap.src.ts#L1002 кажется, что вам нужно обновить allowTraversingTree свойство:

chart.series[0].update({
  allowTraversingTree: false
});

Демонстрационная версия: https://jsfiddle.net/BlackLabel/5dw2kcmt/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Series#update

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...