Chart.js Annotation插件无报错但标注线不显示问题求助

核心问题分析 #

图表能正常渲染但标注线不出现，主要是三个问题：

• Chart.js版本适配的配置写法错误
• 标注线（line类型）的配置参数不匹配
• 数据格式为字符串而非数值类型

具体修复步骤 #

1. 修正坐标轴配置（适配Chart.js v3+）
   代码里yAxes: [{...}]是Chart.js v2的写法，v3+版本需要改为scales.y的对象形式。

2. 调整标注线的正确配置
   line类型的标注不支持backgroundColor，需用borderColor定义线条颜色；同时必须指定x轴范围，让线条覆盖整个图表宽度。

3. 确保数据为数值类型
   给data数组元素加引号会导致Chart.js识别为字符串，需去掉引号，让数据以数值形式传入。

修复后的完整代码 #

<!-- base.html中的引用保持不变，注意确认版本匹配：Chart.js v3+对应chartjs-plugin-annotation v2+ -->
<script src="path/to/chartjs/dist/chart.min.js"></script>
<script src="path/to/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.min.js"></script>

继承页面的脚本部分：

$(document).ready(function(){
  const ctx = document.getElementById('myChart');

  const labels = [{% for item in query_set%}'{{item.analysis_date}}',{% endfor %}];

  const data = {
    labels: labels,
    datasets: [
      {
        label: '{{analysis_info.a_name}} - {{analysis_info.a_measur}}',
        // 去掉引号，确保数据是数值类型
        data: [{% for item in query_set%}{{item.analysis_data}},{% endfor %}],
        borderColor: 'rgb(75, 192, 192)',
        borderWidth: 4,
      },
    ]
  };

  const options = {
    // 修正scales配置为v3+写法
    scales: {
      y: {
        ticks: {
          beginAtZero: true,
          min: 0
        }
      }
    },
    animation: {
      duration: 1500,
    },
    plugins: {
      autocolors: false,
      annotation: {
        annotations: {
          box1: {
            type: 'line',
            yMin: 10,
            yMax: 10,
            // 线类型用borderColor和borderWidth，而非backgroundColor
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 2,
            // 指定x轴范围，让线条覆盖整个图表
            xMin: 0,
            xMax: labels.length - 1
          }
        }
      }
    }
  }

  const config = {
    type: 'line',
    data,
    options,
  };

  const chart = new Chart(ctx, config);
});

额外验证点 #

• 确认chartjs-plugin-annotation的版本和Chart.js版本兼容（比如Chart.js v4.x需要annotation v3.x）
• 打开浏览器控制台，检查是否有JS报错，比如插件未加载、参数错误等

内容的提问来源于stack exchange，提问作者docoder