按第三个变量对数据点进行分组并在图例中显示组名

Question

我正在尝试创建一个柱形图，其中分组柱代表一个分区，并且具有相同分区的数据点具有相同的柱颜色。这是我的 jsfiddle 演示：https://jsfiddle.net/codelock/x5w32u69/16/

在此示例中，x 轴是位置，y 轴是产品，我想通过另一个变量划分对它们进行分组。具有相同分区的位置将具有相同的颜色。例如，foo1 和 foo2 将具有相同的分区 - division1，因此具有相同的红色。我可以让图表显示不同的颜色，但它们没有出现在图例中。我希望这些部门在图例中显示为 - division1(red), division2(black), division3(blue)

如何在现有情况下添加这些图例？如果解决方案可行，我愿意从头开始修改代码。

注意：这里要注意的重点是每个分区的x轴是不同的。所以位置对于它的部门来说是独一无二的。因此不是这种图表：https://www.highcharts.com/demo/column-basic

提前致谢。

Answer 1

您可以将部门划分为系列，并根据 x 值将点放在适当的位置。

    series: [{
        name: "division1",
        color: 'red',
        data: [{
            y: 20,
            x: 0
        }, {
            y: 30,
            x: 1
        }]
    }, {
        name: "division2",
        color: 'black',
        data: [{
            y: 10,
            x: 2
        }, {
            y: 20,
            x: 3
        }, {
            y: 20,
            x: 4
        }]
    }, {
        name: "division3",
        color: 'blue',
        data: [{
            y: 20,
            x: 5
        }]
    }]

现场演示： https://jsfiddle.net/BlackLabel/c7jnsdaw/

API参考：https://api.highcharts.com/highcharts/series.column.data

按第三个变量对数据点进行分组并在图例中显示组名

Group data points by third variable and display the group name in legend

reactjs

highcharts

react-highcharts