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);

ChartJs-无法绘制注释线

1 个答案: