ChartJs -无法绘制注释线

Question

我试着画平均价格注释，但什么也没发生..价格条也被画出来了，但是，注释没有发生任何变化。另外，我检查了控制台，没有错误或警告

const Chart = require("chart.js");

const ctx = document.querySelector("#canvas").getContext("2d");

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["iPhone", "Samsung", "Xiaomi"],
        datasets: [
            {
                data: [1000, 700, 900]
            },
        ]
    },
    options: {
        title: {
            display: true,
            text: "Price Comparison",
            fontSize: 22,
            fontColor: "white",
        },
        legend: {
            display: false
        },

        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    display: false
                }
            }],
        }
    },
    plugins: {
        annotation: {
            drawTime: 'afterDatasetsDraw',

            annotations: [{
                type: 'line',
                mode: 'horizontal',
                scaleID: 'y-axis-0',
                value: 750,
                borderColor: 'rgb(75, 192, 192)',
                borderWidth: 4,
                label: {
                    enabled: true,
                    content: 'Average Price'
                }
            }]
        }
    }
});

Answer 1

我找到了。我忘记注册插件了。在我使用另一个插件之前，这是不需要手动广告。但是似乎有些插件并不是全局添加的。我们应该手动添加它们。

const Chart = require("chart.js");
const Annotation = require("chartjs-plugin-annotation");
Chart.plugins.register(Annotation);