Как создать диаграмму-воронку в ChartJS 3.8.x
Я пытаюсь создать воронку с помощью этой диаграммы, но не могу найти способ заставить ее работать. Я использую 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')
Я не уверен, что я делаю неправильно и что еще я могу попробовать.
@Skandog Я добавил код, показывающий, что я пробовал, и исправил место, где я сказал, что зарегистрировал плагины внутри options, чего я не сделал. Я запомнил это неправильно.
Спасибо @MrJant, это было действительно полезно, я дал ответ ниже. Надеюсь, это будет полезно 🙏
Ответы 1
На GitHub для пакета приведены примеры того, как инициализировать плагин с помощью модулей ES, что отличается от предыдущих попыток — вы пробовали эти подходы?
*"Сборка библиотеки ESM поддерживает встряхивание дерева, поэтому не имеет побочных эффектов. Как следствие, библиотекаchart.js не будет автоматически манипулироваться, а новые контроллеры не будут автоматически регистрироваться. Их необходимо импортировать и регистрировать вручную.
Вариант А:"*
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],
},
],
},
});
Вариант Б:
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,
}
}]
},
});
Это оно. Я новичок вchartjs и не осознавал, что импортирую диаграмму, а не плагин (хотя я говорил это тысячу раз). Спасибо
Ох, потрясающе, рад, что это сработало 😀 Я уже некоторое время использую Chart.js, и мне ВСЕ ЕЩЕ кажется, что это безумно неудобно!
Если можете, возможно, вам будет полезно поделиться немного больше кода о том, как вы создаете экземпляр диаграммы, даже если ни один из вариантов в настоящее время не работает. Единственное, что я могу придумать, это то, что во втором пункте вы регистрируете плагин В объекте параметров, тогда как плагины должны находиться вне параметров. sgratzl.com/chartjs-chart-funnel/examples