Javascript 在x轴和图例中显示HighCharts系列名称

我正在尝试使用Highcharts创建柱状图，该柱状图仅显示一个时间点的多个系列，我希望在x轴上显示系列的名称，并且能够使用图例隐藏和显示每个系列。 我能达到的最接近我想要达到的目标是通过添加类别和拥有多个系列

xAxis: {
            categories: [
                'Tokyo',
                'New York',
                'London',
                'Berlin'
            ]
        }

然后添加多个系列，每个系列中只有一个数据点

series: [{
            name: 'Tokyo',
            data: [49.9, null,null,null]

        }, {
            name: 'New York',
            data: [null, 83.6,null,null]

        }, {
            name: 'London',
            data: [null, null, 48.9,null]
        }, {
            name: 'Berlin',
            data:[null, null, null, 42.4]
        }]

问题是，虽然这仅为x轴上的每个点显示一个序列，但Highcharts为其他每个序列分配空间，并且在隐藏序列时，仅隐藏序列，而不隐藏x轴上的标签。

---

指向JSFIDLE的链接位于此处：

在plotOptions中设置

分组：false

，请参阅：

可以将类别与列一起隐藏。请浏览下面给出的链接。希望这会有所帮助

---

我已经改进了一点，但仍然需要改进：最终结果与我在评论上发布的更改完全相同，但是当你隐藏一个系列时，列仍然存在。不可能在图表上“隐藏”类别。您需要准确地设置新类别、重新组织系列等。这就是为什么我没有将我的更改作为解决方案发布。这需要做更多的工作才能实现。谢谢！改变分组使它看起来好多了。通过删除数据末尾的空值，我确实更接近我想要的。这允许您将序列隐藏到右侧，但显然还不是解决方案。有人能在饼图中提出建议吗？

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
           type: 'category',
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            },   
        },
        plotOptions: {

             series: {
              grouping: false,
              events: {
                legendItemClick: function () {
                debugger;
                    if (this.visible) {
                                        this.setData([], false)
                                         } 
                     else {
                                            this.setData([this.chart.series[this.index].userOptions], true);
                                            }
                }
            },
             borderWidth: 0,
            dataLabels: {
                enabled: true,
                //style: {
                //    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                //},

            },
          },
        },
        series: [{
            name: 'Tokyo',
            data: [{name : 'Tokyo',y:49.9}],
            y: 49.9

        }, {
            name: 'New York',
            data: [{name : 'New York',y:83.6}],
            y: 83.6

        }, {
            name: 'London',
            data: [{name : 'London',y:48.9}],
            y: 48.9
        }, {
            name: 'Berlin',
            data:[{name : 'Berlin',y: 42.4}],
            y: 42.4
        }],
          navigation: {
        buttonOptions: {
            enabled: true
        }
    }
    });
});