我如何使用 chartjs-plugin-annotation？

Question

`<!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.js 3.0.0 和 chartjs-plugin-annotation.

但是没有显示任何图表。

我复制了几个示例代码以及这个，但结果 chartjs-plugin-annotation 没有工作

有什么问题？

Answer 1

常量 options 和 config 必须在使用前声明。还要确保使用最新版本的 Chart.js 和 chartjs-plugin-annotation 库，并检查两个链接 (script.src) 是否有效。

请查看您修改后的代码，看看它是如何工作的。

const options = {
  plugins: {
    autocolors: false,
    annotation: {
      annotations: {
        line1: {
          type: 'line',
          yMin: 60,
          yMax: 60,
          borderColor: 'rgb(255, 99, 132)',
          borderWidth: 2
        }
      }
    }
  }
};
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 myChart = new Chart('myChart', config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<canvas id="myChart" width="500" height="200"></canvas>

我如何使用 chartjs-plugin-annotation？

how can i use chartjs-plugin-annotation?

javascript

chart.js