【问题标题】:Highcharts drilldown treemap legendHighcharts 向下钻取树图图例
【发布时间】:2021-07-05 03:15:33
【问题描述】:

我正在研究一个向下钻取树图,而渲染正是我想要的。 我的问题是关于传说。 我将 colorAxis 用于向下钻取级别,我想在主级别隐藏图例(按图块显示一种颜色),但在子级别上显示渐变色轴图例,仅用于显示的子系列。

我在这里做了一个例子:http://jsfiddle.net/vegaelce/4dLopjwv

我使用属性图例来显示它:

    legend: {
    enabled: true
},

但它会显示子级别上每个颜色轴的图例。 除了与显示的子系列对应的图例之外,如何隐藏所有图例? 提前致谢

【问题讨论】:

    标签: highcharts legend treemap drilldown


    【解决方案1】:

    您可以使用drilldowndrillup 事件并更新右侧颜色轴的visible 属性。

        chart: {
            type: 'treemap',
            events: {
                drilldown: function(e) {
                    const colorAxis = this.colorAxis[e.seriesOptions.colorAxis];
                    if (colorAxis) {
                        colorAxis.update({
                            visible: true
                        }, false);
                    }
                },
                drillup: function() {
                    this.colorAxis.forEach(function(cAxis){
                        if (cAxis.visible) {
                            cAxis.update({
                                visible: false
                            }, false);
                        }
                    });
                }
            }
        }
    

    现场演示: http://jsfiddle.net/BlackLabel/vtg7fdn6/

    API 参考: https://api.highcharts.com/class-reference/Highcharts.Axis#update

    【讨论】:

    • 谢谢你,它的工作就像一个魅力。但是,如果我为我的图例添加标题,我会看到意外的行为。你可以在这里看到结果:jsfiddle.net/vegaelce/1s4dzct3。标题仍出现在主关卡中,而没有可用的图例项。为了避免这种情况,我尝试在主级别禁用图例并使用向下钻取/向下钻取事件来启用/禁用它(结果在这里:jsfiddle.net/vegaelce/8mxsta50),向下钻取时效果很好,但在向下钻取时会引发错误。这是我的钻取事件中的错误还是问题?
    • 嗨@vegaelce,您不能在钻取期间更新图例,但您可以直接在标题上使用显示/隐藏方法。示例:jsfiddle.net/BlackLabel/o046k8zu
    猜你喜欢
    • 2023-03-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-10-15
    • 1970-01-01
    • 1970-01-01
    • 2023-04-07
    • 2020-10-03
    相关资源
    最近更新 更多