使用apexchart进行rails7提出错误未介绍的参考：未定义apexcharts
我是Rails的新手，并试图将Apexchart JS添加到Rails7的项目中。
所以我做到了
document.addEventListener('turbo:load', function(){
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
var chart = new ApexCharts(document.querySelector('.user-apex-chart'), options);
if (chart) {
chart.render();
}
})在我跑步之前 npm install apexcharts - 保存
具有esbuild and turbo
并添加到应用程序
import ApexCharts from 'apexcharts'
我
"dependencies": {
"@hotwired/turbo-rails": "^7.1.1",
"@popperjs/core": "^2.11.5",
"apexcharts": "^3.35.3",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"esbuild": "^0.14.38",
"sass": "^1.51.0",
"tom-select": "^2.0.0"
},
在启用服务器时 。 但是似乎看不到顶点。
我做错了什么？
以下测试代码正在工作：
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
I'm new one in rails and trying to add Apexchart js to my project in rails7.
So i did
document.addEventListener('turbo:load', function(){
var options = {
chart: {
type: 'line'
},
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}],
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
}
var chart = new ApexCharts(document.querySelector('.user-apex-chart'), options);
if (chart) {
chart.render();
}
})before I run
npm install apexcharts --save
I have Esbuild and turbo on
and add to application.js this:
import ApexCharts from 'apexcharts'
in package.json it has apex
"dependencies": {
"@hotwired/turbo-rails": "^7.1.1",
"@popperjs/core": "^2.11.5",
"apexcharts": "^3.35.3",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"esbuild": "^0.14.38",
"sass": "^1.51.0",
"tom-select": "^2.0.0"
},
no erorrs when I started the server..
but seems it doesn't see Apex.
What I did wrong?
the test code following below is working:
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这可能是因为您的应用程序。
defer的
说明递送：true to选项参数，然后它将在事件侦听器中包装图表代码。
我不知道活动听众是否会与Turbo一起使用。
This is likely caused because your application.js script tag has
defer="defer"and the library by default renders script tags that expectApexChartsto exist.Explanation of defer
The library supports passing
defer: trueto the options argument and then it will wrap create chart code inside an event listener.I don't know if the event listener will work with turbo yet though.