图表未在带有 webpacker 的 Rails 6 视图页面中定义

GSP 发表于 Dev

普惠制

我试图找出使用正确的方式Chart，从chart.js在Rails 6应用程序中使用webpacker。我希望我的图表生成 javascript 代码保留在页面中，因为我将从视图中动态生成它。

我开始了

yum add chartjs

然后添加到应用程序包（并且javascript_pack_tag在我的application.html.erb）

// app/javascript/packs/application.js
import Chart from "chartjs";

然后，在一个视图中，我尝试使用该库：

  <div class="row">
    <div class="col">
      <canvas id="backlog-chart" width="100%" height="400px">
      <script>
        var ctx = document.getElementById('backlog-chart').getContext('2d');
        new Chart(ctx, { ...

这因Chart is not definedjavascript 错误而失败。

我尝试过的事情：

require("chartjs")包括图书馆的形式application.js似乎没有任何影响。
我试图加入config/webpack/environment.js到ProvidePlugin与对象Chart: "chartjs/chart.js"，但没有改变。
我已经尝试import Chart from "chart.js"直接添加到<script>视图中的部分，但这失败了，浏览器上出现“仅允许在模块中导入”错误。

我的 javascript 技能绝对跟不上过去几年的新技术，因此任何有关正确方法的建议将不胜感激。

瑞恩·克里斯平·海尼斯

您不能Chart在 HTML 正文中的脚本中使用，因为Chart尚未全局定义。您可以通过嵌入脚本标签来导入chart.js javascript，然后Chart就可以使用了。但是你说你想使用Webpacker，所以......

将您的图表定义包含在您的中application.js，而不是包含在脚本标签中。

// app/javascript/packs/application.js
import Chart from "chartjs";

var ctx = document.getElementById('backlog-chart').getContext('2d');
var myChart = new Chart(ctx, {...});

这将在您的 HTML 中定位该画布：