Question

我正在使用HighCharts。我有在饼图中呈现的数据。当我点击图例标签时，我可以隐藏/显示我不同的饼图。宇！

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

我的系列是：

    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定义 categories ：

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

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

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

这里是DEMO。

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

1 个答案: