我如何使用chartjs-plugin-annotation？

cwxwcias 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(304)

`<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0/chart.min.js"></script>
    <script src="./chartjs-plugin-annotation-0.5.7/chartjs-plugin-annotation.min.js"></script>

</head>

<body>

    <canvas id="myChart" width="500" height="200"></canvas>

    <script>        
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
        const config = {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
            label: 'My First Dataset',
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
            }]
        },
        options
        };
        const options = {
        plugins: {
            autocolors: false,
            annotation: {
            annotations: {
                line1: {
                type: 'line',
                yMin: 60,
                yMax: 60,
                borderColor: 'rgb(255, 99, 132)',
                borderWidth: 2,
                }
            }
            }
        }
        };

    </script>

</body>

</html>`

我想使用chartjs-plugin-annotation。
所以我把chart.js3.0.0和chartjs-plugin-annotation放在一起。
但它没有显示任何图表。
我复制了几个示例代码以及这个，但作为一个结果chartjs-plugin-annotation不工作
有什么问题吗？

chart.js

来源：https://stackoverflow.com/questions/72456090/how-can-i-use-chartjs-plugin-annotation