时间戳

首页 > 解决方案 > 桑基图中的向下钻取

highcharts - 桑基图中的向下钻取

问题描述

我正在寻找有关如何在 sankey 图中实现向下钻取的示例代码。我尝试使用列钻取演示中的钻取代码，但它不适用于 sankey。预期的功能与树状图非常相似，即单击节点以隐藏显示子节点。

示例： https ://jsfiddle.net/y_tddel/d7jby2z1/5/ 

 .

在此示例中，第二列中的每个节点都是可单击的，并且具有自己的子节点。Indo-Iranian 节点的展开视图作为示例显示。

标签： highchartssankey-diagram

解决方案

Series.point.events 可用于在用户点击任意节点时触发事件，并更新系列数据，并添加返回按钮。

链接：https ://api.highcharts.com/highcharts/series.sankey.point.events.click

看下面的代码示例：

Highcharts.chart('container', {
    series: [{
        point: {
            events: {
                click: function (e) {
                    console.log(e, 'e')

                    let series = this.series,
                        chart = series.chart;

                    if (this.isNode) {
                        if (isDrilldown[isDrilldown.length - 1] != this.name && drilldown_data.hasOwnProperty(this.name)) {
                            chart.backButton = chart.renderer.button('back', chart.plotLeft, 20, function () {
                                isDrilldown.pop();
                                d = JSON.parse(JSON.stringify(drilldown_data[isDrilldown[isDrilldown.length - 1]]));
                                series.update({data: d});
                                chart.backButton.destroy();
                                chart.title.show();
                            }).add()

                            isDrilldown.push(this.name);
                            chart.title.hide()
                            this.series.update({
                                data: JSON.parse(JSON.stringify(drilldown_data[this.name]))
                            })
                        }
                    }
                }
            }
        },

        keys: ['from', 'to', 'weight', 'drilldown'],
        data: JSON.parse(JSON.stringify(plot_data)),
        type: 'sankey'
    }],
});

演示：https ://jsfiddle.net/deveshgoyal/1zcnuq5b/2/

推荐阅读