英文:
Chart.register is not a function (vue-chartjs official example not working)
问题
我正在尝试将官方的'vue-charts.js'文档示例应用到我的Nuxt 2项目中：
<template>
<Bar
id="my-chart-id"
:options="chartOptions"
:data="chartData"
/>
</template>
<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
export default {
name: 'BarChart',
components: { Bar },
data() {
return {
chartData: {
labels: ['January', 'February', 'March'],
datasets: [{ data: [40, 20, 12] }]
},
chartOptions: {
responsive: true
}
}
}
}
</script>
但我收到了 chart_js__WEBPACK_IMPORTED_MODULE_1__.Chart.register is not a function 错误。我可能做错了什么？
附加信息：
"nuxt": "^2.15.7",
"vue-chartjs": "^5.2.0",
"chart.js": "^4.2.1"
英文:
I am trying to use the official 'vue-charts.js' documentation example into my nuxt 2 project:
<template>
<Bar
id="my-chart-id"
:options="chartOptions"
:data="chartData"
/>
</template>
<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
export default {
name: 'BarChart',
components: { Bar },
data() {
return {
chartData: {
labels: [ 'January', 'February', 'March' ],
datasets: [ { data: [40, 20, 12] } ]
},
chartOptions: {
responsive: true
}
}
}
}
</script>
But i get chart_js__WEBPACK_IMPORTED_MODULE_1__.Chart.register is not a function error. What Can i be doing wrong?
Additional info:
"nuxt": "^2.15.7",
"vue-chartjs": "^5.2.0",
"chart.js": "^4.2.1"
答案1
得分: 1
尝试不要将 Chart 重命名为 ChartJS。
如果出现关于模块解析失败的错误，您需要使用 babel-loader 来转译 vue-chartjs 和 chartjs。
这主要是由于旧版本的 webpack 无法理解现代语法所致。
https://github.com/apertureless/vue-chartjs/issues/1002
英文:
Try to not rename Chart to ChartJS.
If you get an error regarding module parse failing, you need to use babel-loader to transpile vue-chartjs and chartjs
Mostly due to older webpack version that can't understand modern syntax.
答案2
得分: 0
如果不将 Chart 重命名为 ChartJS 会发生什么？所以，可以这样写：
import { ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js';
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
英文:
What happens if you don't rename Chart to ChartJS? So, instead, have
import { Chart, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js';
Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论