Vue2+ChartJS3.8.x使用chartjs-chart-funnel创建漏斗图报错求助

我在VueCLI（Vue2）项目中尝试使用chartjs-chart-funnel插件创建漏斗图，但安装后就遇到了一系列问题。执行npm install chart.js chartjs-chart-funnel后，哪怕还没导入图表，控制台就抛出Uncaught TypeError: Cannot read properties of undefined (reading 'helpers')错误。

已尝试的操作及对应报错 #

1. 直接设置图表类型为funnel

this.chartLeads2 = new Chart(document.getElementById("graphLead2"), {
    type: 'funnel',
    data: {
        datasets: [{
            label: 'TOTAL LEADS',
            data: [this.data],
            fill: false,
            borderWidth: 1,
            datalabels: {
                anchor: 'end',
                align: 'right',
                clamp: true,
            }
        }]
    },
    plugins: [ChartDataLabels],
})

报错：Error: "funnel" is not a registered controller.

2. 内联注册插件

import ChartFunnel from 'chartjs-chart-funnel';

this.chartLeads2 = new Chart(document.getElementById("graphLead2"), {
    type: 'funnel',
    data: {
        datasets: [{
            label: 'TOTAL LEADS',
            data: [this.data],
            fill: false,
            borderWidth: 1,
            datalabels: {
                anchor: 'end',
                align: 'right',
                clamp: true,
            }
        }]
    },
    plugins: [ChartDataLabels,ChartFunnel],
})

报错：TypeError: Cannot read properties of undefined (reading 'id')

3. 通过Chart.register(ChartFunnel)注册插件

import ChartFunnel from 'chartjs-chart-funnel';
Chart.register(ChartFunnel)
this.chartLeads2 = new Chart(document.getElementById("graphLead2"), {
    type: 'funnel',
    data: {
        datasets: [{
            label: 'TOTAL LEADS',
            data: [this.data],
            fill: false,
            borderWidth: 1,
            datalabels: {
                anchor: 'end',
                align: 'right',
                clamp: true,
            }
        }]
    },
    plugins: [ChartDataLabels,ChartFunnel],
})

报错：TypeError: Cannot read properties of undefined (reading 'prototype')

解决方案 #

1. 调整依赖版本 #

最新版chartjs-chart-funnel与部分Chart.js版本存在兼容问题，建议安装经过验证的兼容版本：

npm install chart.js@3.9.1 chartjs-chart-funnel@3.0.0

2. 正确注册插件 #

在Vue组件中按以下方式导入并注册插件，确保Chart.js的完整导入：

import Chart from 'chart.js/auto';
import ChartFunnel from 'chartjs-chart-funnel';
import ChartDataLabels from 'chartjs-plugin-datalabels';

// 全局注册所需插件
Chart.register(ChartFunnel, ChartDataLabels);

export default {
  mounted() {
    this.initFunnelChart();
  },
  methods: {
    initFunnelChart() {
      const ctx = document.getElementById("graphLead2").getContext('2d');
      this.chartLeads2 = new Chart(ctx, {
        type: 'funnel',
        data: {
          datasets: [{
            label: 'TOTAL LEADS',
            data: [150, 120, 80, 50], // 漏斗图需多阶段数值数组
            fill: false,
            borderWidth: 1,
            datalabels: {
              anchor: 'end',
              align: 'right',
              clamp: true,
            }
          }]
        }
      });
    }
  }
}

3. 修正数据格式 #

漏斗图的data字段需要是多阶段数值数组（如[150,120,80,50]），而非单个值的包裹数组[this.data]，否则会导致渲染异常。

4. 确保DOM元素就绪 #

在mounted钩子中初始化图表，保证目标DOM元素已完成渲染，避免getElementById返回null。

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