ChartJs水平线

Question

我正在使用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'
                        }
                    }]
                }
            }
        });

我已经做了很多研究，但是我找不到什么有问题的..

Answer 1

您的注释的y值是5，位于图表底部。

这是一个codepen，注释正常工作。

我假设您的标签看起来像这样：

labels: [6,7,8,9,10,11],

和您的数据

data: [38, 8, 32, 25, 47,30],

，然后添加注释值：

value: 30,