Question

我正在创建一个条形图，可以通过图例隐藏每个条形图。

但是，只有第一个和最后一个系列被完全隐藏。中间的那些从绘图区域消失，但它们的标签在X轴上仍然可见。

以下是jsfiddle示例。点击从第一个/最后一个项目和中间项目开始的图例，你会看到我在说什么。

以下是我正在传递的图表选项：

{
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Compare scores per department'
    },
    xAxis: {
        type: 'category'
    },
    plotOptions: {
        bar: {
            grouping: false,
            dataLabels: {
                enabled: true,
            },
    },
    series: [
        { name: 'department 1', data: [{ name: 'department 1', y: 45 }] },
        { name: 'department 2', data: [{ name: 'department 2', y: 68 }] },
        { name: 'department 3', data: [{ name: 'department 3', y: 82 }] },
        { name: 'department 4', data: [{ name: 'department 4', y: 37 }] }
    ]
}

有关如何修复它或其他方法来实现它的任何想法？

谢谢！

Answer 1

如果您不需要xAxis上的类别（条形图在左侧是垂直的）但是图例就足够了，您可以通过这种方式更改选项：

xAxis: {
   labels: {
     enabled: false
   }
},
plotOptions: {
   // any
}

检查小提琴已更新：https://jsfiddle.net/beaver71/zbktpf0g/

<强>更新

此外，根据Deep 3015的建议，您可以启用dataLabels：

plotOptions : {
    series : {
        dataLabels : {
            enabled : true,
            align : 'left',
            color : '#FFFFFF',
            inside : true,
            formatter : function () {
                return this.key
            }
        },
    }
},

Answer 2

它似乎是类别轴的已知问题（隐藏点仅隐藏第一个/最后一个类别）。

我从Highcahrts团队得到以下解决方法：使用series.events.legendItemClick事件将空数据设置为hide上的项目，然后在再次显示时将数据放回：

plotOptions: {
    series: {
        events: {
            legendItemClick: function () {
                if (this.visible) {
                    this.setData([], false)
                } else {
                    this.setData([seriesArray[this.index]], false);
                }
            }
        }
    },
}

jsfiddle

我希望它会帮助那些面临同样问题的人。

Highcharts条形图 - 图例仅隐藏第一个和最后一个系列，其他则在X轴上保持可见

2 个答案: