使用 recharts 或 highcharts 的堆叠条形图的条形内的垂直线

Question

如何添加一行，如第一栏中的那一行。它将以百分比为基础，即条形的全宽为 100%。任何线索都会有所帮助。我当前的图表基于 the code from this simple example 如果可以的话，我可以切换到 highcharts。

Answer 1

您可以使用 Highcharts 库轻松绘制这些线。

为此，您需要将这些线定义为一个新系列，您需要在其中定义 x 和 y 值以适合图表上的线。

演示：https://jsfiddle.net/BlackLabel/v3gmph9w/

series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2]
}, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]
}, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5]
}, {
        type: 'line',
    enableMouseTracking: false,
    data: [{x:0, y: 3}, {x: 0, y: 5}]
}]

API: https://api.highcharts.com/highcharts/series.line.data

使用 recharts 或 highcharts 的堆叠条形图的条形内的垂直线

Vertical line within bars of a stacked bar chart using recharts or highcharts

highcharts

reactjs

recharts