ChartJS — строка аннотации не может быть нарисована

#javascript #chart.js

#javascript #chart.js

Вопрос:

Я пытаюсь нарисовать среднюю оценку цены, но ничего не происходит.. Ценовые бары также были нарисованы, но с раздражением ничего не происходит. Также я проверил консоль, ошибки или предупреждения нет

 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'
                }
            }]
        }
    }
});
  

Ответ №1:

Я нашел это. Я забыл зарегистрировать плагин. Раньше я использовал другой плагин, который не требует ручной рекламы. Но, похоже, некоторые плагины не добавлены глобально. Мы должны добавить их вручную..

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