javascript - 在 HighCharts 中隐藏/显示多个系列

Question

我正在使用 HighCharts。我有以饼图形式呈现的数据。当我单击图例标签时，我可以隐藏/显示不同的饼图切片。哇!

我想做的是在此 View 中隐藏/显示不同的列以达到相同的效果。 (点击狗/鸟应该删除该列 - 与饼图切片相同)。

我的系列是:

    series: [{
        type: "pie", //Change to "column"
        data:[{
            name: "dog",
            age: 52,
            y: 52
        },
        {
            name: "bird",
            age: 12,
            y: 12
        }]
    }]

http://jsfiddle.net/Lmbw75mg/

如何更改我的结构，使其适用于两者？

Answer 1

为了使其在柱形图中相同，您必须使用两个系列，而不是一个:

series: [{
        type: "column",
        name: "dog",
        data: [{
            age: 52,
            x: 0,
            y: 52
        }]
    }, {
        type: "column",
        name: "bird",
        data: [{
            age: 12,
            x: 1,
            y: 12
        }]
    }]

此外，您还必须为 xAxis 定义类别:

xAxis: {
    type: 'category',
    tickWidth: 0,
    lineColor: "#C0D0E0",
    lineWidth: 1,
    categories: ['dog', 'bird']
}

为了使列等距，您需要将 plotOptions.column.grouping 设置为 false:

plotOptions: {
    colorByPoint: true,
    column: {
        grouping: false
    }
}

这是DEMO .