在HighCharts中隐藏/显示多个系列-Java 学习之路

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

我想做的是在这个视图中隐藏/显示不同的列到相同的效果 . （单击狗/鸟应该删除列 - 与饼图相同） .

我的系列是：

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

http://jsfiddle.net/Lmbw75mg/

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

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 .

回复于 2024-04-29T23:29:30+08:00

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

1 回答

相关问题