如何在 ChartJS 3.8.x 中创建漏斗图

Question

我正在尝试使用 this 图表创建一个漏斗，但我找不到使其工作的方法。我正在使用 VueCLI (vue 2)。

执行完

npm install chart.js chartjs-chart-funnel

后，即使没有导入图表，控制台上也会出现错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'helpers')

我尝试过的以及遇到的错误：

• 将我的图表类型设置为

  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.

• 将其内联注册为插件：

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')

• 将其注册为插件（使用

  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')

我不确定我做错了什么，或者我还可以尝试什么。

Answer 1

该包的 GitHub 提供了如何使用 ES 模块初始化插件的示例，这看起来与之前的尝试不同 - 您尝试过这些方法吗？

*“该库的 ESM 版本支持树摇动，因此没有副作用。因此，chart.js 库不会自动操作，也不会自动注册新控制器。必须手动导入和注册它们。

变体A：“*

import Chart, { LinearScale, CategoryScale } from 'chart.js';
import { FunnelController, TrapezoidElement } from 'chartjs-chart-funnel';

// register controller in chart.js and ensure the defaults are set
Chart.register(FunnelController, TrapezoidElement, LinearScale, CategoryScale);

const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
  type: 'funnel',
  data: {
    labels: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
    datasets: [
      {
        data: [0.7, 0.66, 0.61, 0.01],
      },
    ],
  },
});

变体B：

import { FunnelChart } from 'chartjs-chart-funnel';

const chart = new FunnelChart(document.getElementById('canvas').getContext('2d'), {
  data: {
    //...
  },
});

因此，对于您来说，数据如下：

import { FunnelChart } from 'chartjs-chart-funnel';
    
    const chart = new FunnelChart(document.getElementById('canvas').getContext('2d'), {
      data: {
        datasets: [{
          label: 'TOTAL LEADS',
          data: [this.data],
          fill: false,
          borderWidth: 1,
          datalabels: {
              anchor: 'end',
              align: 'right',
              clamp: true,
          }
      }]
    },
  });