不能用ChartJS注释插件和原始图在图形上绘制水平线

Question

我在Vue 3组合中工作，并试图使用ChartJS注释插件在我的ChartJS图上画一条水平线。(https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/types/line.html)

我使用Primevue图表组件作为ChartJS的实现。

我导入了import annotationPlugin from 'chartjs-plugin-annotation';和import Chart from 'primevue/chart';，并使我的组件类似于：

<Chart    
  type="line"
 :data="data"
 :options="options"
 :plugins="annotationPlugin"
/>

这就是我的图表选项的样子：

const options = ref({
      plugins: {
        autocolors: false,
        annotation: {
          annotations: {
            line1: {
              type: 'line',
              yMin: 125,
              yMax: 125,
              borderColor: 'rgb(255, 99, 132)',
              borderWidth: 2,
            },
          },
        },
      },
    });

我的图形渲染成功，但没有水平线，也没有错误。

我认为我正确地跟踪了这些文档，但我肯定遗漏了一些东西。提前感谢！

无水平线图

Answer 1

我们遇到了类似的问题，需要确保我们在项目根目录中全局注册注释插件。

如果没有这一点，注释就会悄然失败，正如您所描述的那样：

import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);

此外，仅引用options对象中的注释就足够了。这里不需要图表组件本身的plugins参数：

<Chart    
  type="line"
 :data="data"
 :options="options"
 :plugins="annotationPlugin"
/>

来源：https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/integration.html#bundlers-webpack-rollup-etc