ChartJS 注释是否在 X 轴索引上呈现线条注释？

Question

问题描述： 我正在开发一个项目，需要在数据集中渲染一条垂直线以指示图表上的收支平衡点。 x 轴标签是根据用户输入动态生成的，盈亏平衡线的位置是根据这些标签计算的。但是，我遇到了一个问题，即该线只有在标签数组的键上绘制时才能正确呈现。

代码片段：

const breakEvenLine = {
    type: 'line',
    scaleID: 'x',
    value: minimalIncome,
    borderWidth: 3,
    borderColor: 'black',
    label: {
        content: 'TEST',
        display: true
    }
};

尝试的解决方案：

• 我已经验证minimumIncome计算正确并且对应于有效的x轴值。
• 我尝试了不同的scaleID值，以确保我瞄准正确的轴。
• 我已经查看了文档（假设使用 Chart.js 或类似的库），以了解任何潜在的线型配置错误或将其添加到图表的方式。

问题：

1. 我是否缺少特定的配置或属性，可以根据值而不是标签数组的键来绘制线条？
2. 此问题是否与我在用户输入更改后更新图表或数据集的方式有关？

其他背景：

我正在使用 Chart.js（最新）来渲染图表。 图表随着用户输入数据而动态更新，并且每次都会重新计算盈亏平衡点。

谢谢！

Answer 1

感觉像是作弊，但通过实施：

                    oorspronkelijkeOmzetBereik.push(omzet);
                    const nieuweOmzet = omzet * 1.60;
                    const extraWinst = nieuweOmzet - omzet - investering - extraKosten;
                    **if (extraWinst >= 0 && breakEvenPunt === 0) {
                        breakEvenPunt = omzet;
                    }**
                    extraWinstBerekening.push(extraWinst);
                }```

and:

```breakEvenPunt = oorspronkelijkeOmzetBereik.findIndex(omzet => omzet >= breakEvenPunt);```

I found the index to bind to the xMin and xMax:
```const breakEvenLine = {
                    type: 'line',
                    xMin: breakEvenPunt,
                    xMax: breakEvenPunt,
                    borderWidth: 3,
                    borderColor: 'black',
                    label: {
                        content: 'Minimale oorspronkelijke omzet nodig',
                        display: true
                    }
                };

我希望这个问题保持开放，因为我对解决方案很好奇，或者也许我只是没有正确理解图表。