时间戳

首页 > 解决方案 > Highchart 热图删除图例切换上的空行

highcharts - Highchart 热图删除图例切换上的空行

问题描述

我有一个包含 colorAxis 和 seriesLegend 的类别热图，在此处使用解决方案Show Series and colorAxis both in Legend and highchart-category-grouped plugin。在这里摆弄https://jsfiddle.net/k16sdhrz/

当我切换系列时，我留下了属于该系列的空行。 在此处输入图像描述

是否有一个 highchart 设置可以从轴中删除这些类别，从而删除空行。那么空间可以腾出来吗？

 chart: {
    type: 'heatmap',
},

yAxis: {
    categories: [{
            name: 'Cat 1',
            categories: ['Item 1_1', 'Item 1_2']
        },
        {
            name: 'Cat 2',
            categories: ['Item 2_1', 'item 2_2']
        }
    ]
},

谢谢你的帮助。

标签： highcharts

解决方案

showInLegend: true从 Highcharts v7.2 开始，设置系列以显示它就足够了colorAxis。

至于您的问题-您可以动态添加和删除中断以隐藏空行：

series: [{
    ...,
    events: {
        legendItemClick: function() {
            if (this.visible) {
                this.yAxis.update({
                    breaks: [{
                        from: 1.5,
                        to: 2.5,
                        breakSize: 0
                    }]
                }, false);
            } else {
                this.yAxis.update({
                    breaks: []
                }, false);
            }
        }
    }
}, ...]

现场演示： https ://jsfiddle.net/BlackLabel/0d9a4whz/

API参考：

https://api.highcharts.com/highcharts/yAxis.breaks

https://api.highcharts.com/highcharts/series.heatmap.events.legendItemClick

推荐阅读