使用ApexChart进行rails7引发错误未定义的ReferenceError: ApexCharts

Question

我是rails的新成员，并试图在我的rails7项目中添加Apex图表js。

所以我做了

​

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之前，安装apexcharts -保存

我有埃斯伯德和涡轮增压

并在application.js中添加以下内容：

import ApexCharts from 'apexcharts'

在package.json中，它有顶点

"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"
  },

当我启动服务器时没有错误..。但似乎看不到Apex。

我做错了什么？

下面的测试代码正在工作：

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

Answer 1

这很可能是因为您的application.js脚本标记有defer="defer"，而且库默认地呈现期望ApexCharts存在的脚本标记。

Explanation of defer

库支持将defer: true传递给options参数，然后它将在事件侦听器中包装create图表代码。

 <%= line_chart series, {defer: true} %>

不过，我不知道事件侦听器是否会与turbo一起工作。