javascript - ChartJs水平线

我正在使用 Chartjs 开发一个小型 React 项目。我想显示一条水平线来与数据进行比较。

我使用与 CodePen 相同的代码:https://codepen.io/jordanwillis/pen/qrXJLW

但不为我工作:

 const myChartRef = this.chartRef.current.getContext("2d");
        new Chart(myChartRef, {
            type: "line",
            data: {
                labels: this.state.chartLabels,
                datasets: [
                    {
                        label: "Quantités",
                        data: this.state.chartQt,
                    }
                ]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Chart.js Drsw Line on Chart'
                },
                tooltips: {
                    mode: 'index',
                    intersect: true
                },
                annotation: {
                    annotations: [{
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: 5,
                        borderColor: 'rgb(75, 192, 192)',
                        borderWidth: 4,
                        label: {
                            enabled: false,
                            content: 'Test label'
                        }
                    }]
                }
            }
        });

我做了很多研究，但我找不到什么可能有问题..

最佳答案

您的注释位于图表底部的 y 值:5 处。

这是一个codepen与注释工作。

我假设你的标签看起来像这样: