无法使用 ChartJS 注释插件和 Primevue 图表在图形上绘制水平线

Question

我正在使用 Vue 3 Composition 并尝试使用 ChartJS 注释插件在我的 ChartJS 图形上绘制一条水平线。 (https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/types/line.html)

我正在使用 Primevue Chart 组件作为 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,
            },
          },
        },
      },
    });

我的图表成功呈现，但没有水平线，也没有错误。

我认为我正确地遵循了文档，但一定有我遗漏的地方。提前致谢！

Graph without horizontal line

Answer 1

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

如果没有这个，注释就会像您描述的那样悄无声息地失败：

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

此外，只需在您的选项对象中引用注释就足够了。这里不需要图表组件本身的 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

无法使用 ChartJS 注释插件和 Primevue 图表在图形上绘制水平线

Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart

javascript

chart.js

vuejs3

vue-composition-api

primevue