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

编程问答 2022-05-01

问题描述

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

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

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

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

提前致谢。

解决方法

您可以将分区划分为系列，并通过 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
        },x: 4
        }]
    },{
        name: "division3",color: 'blue',x: 5
        }]
    }]

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

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

highchartshighchartsreact-highchartsreactjsreactjsreactjsreactjs