时间戳

首页 > 解决方案 > Highcharts - 自定义树状图的图例

highcharts - Highcharts - 自定义树状图的图例

问题描述

我目前正在使用 highcharts 创建一个树形图来显示我的数据。我正在尝试自定义图表的图例，以便仅在图例中显示parents名称和颜色。

例如，这些是我的数据对象中的父 ID 名称

{
            id: 'low',
            color: "#0D6302"
        }, {
            id: 'med-low',
            color: "#0B7070"
        }, {
            id: 'med',
            color: '#DC9603'
        }, {
                id: 'med-high',
            color: '#DD5F0C'
        }, {
           id: 'high',
           color: "#C50710"
        }

我只想在我的图例中显示：green "low", blue "med-low", yellow "med", orange "med-high and red "high"

这是我目前传奇的照片

在此处输入图像描述

我不想展示“零售、在线、实体店、电子商务、服装、约会和街头小贩”。

我已经通过在我的系列中使用showInLegend: true和尝试了这一点。legendType: "point"

这是一个 jsfiddle 示例的链接：https ://jsfiddle.net/bahsm5t1/13/

标签： highcharts

解决方案

您可以使用下面的自定义代码隐藏这些图例点，这些代码可以使用加载回调访问它们。

chart: {
    events: {
        load(){
            let chart = this;
            
            chart.legend.allItems.forEach(item => {
                if(item.parent) {
                    item.legendGroup.hide();
                }
            })
        }
    }
},

演示：https ://jsfiddle.net/BlackLabel/uknf8xws/

API：https ://api.highcharts.com/highcharts/chart.events.load

推荐阅读