Диаграмма не определена на странице просмотра Rails 6 с веб-упаковщиком - PullRequest
Новая
       4

Диаграмма не определена на странице просмотра Rails 6 с веб-упаковщиком

0 голосов
/ 11 февраля 2020

Я пытаюсь найти правильный способ использования Chart из chart.js в приложении Rails 6 с использованием веб-упаковщика. Я хотел бы, чтобы код генерации javascript моего графика оставался на странице, поскольку я буду динамически генерировать его из представления.

Я начал с 

yum add chartjs

, а затем добавил в приложение pack (и 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 defined javascript ошибка.

Вещи, которые я пробовал:

  1. Форма require("chartjs") включения библиотеки в application.js, похоже, никак не влияет.
  2. Я попытался добавить config/webpack/environment.js к объекту ProvidePlugin с Chart: "chartjs/chart.js", но без изменений.
  3. И я попытался добавить import Chart from "chart.js" непосредственно в раздел <script> в просмотр, но это не с ошибкой «импорт разрешен только в модуле» в браузере.

Мои javascript навыки определенно не поспевают за последние пару лет новых технологий, поэтому любые предложения по правильный способ сделать это будет оценен.

1 Ответ

1 голос
/ 11 февраля 2020

Вы не можете использовать Chart в сценарии в своем теле HTML, поскольку Chart не было определено глобально. Вы можете импортировать диаграмму. js javascript, внедрив тег script, и тогда будет доступно Chart. Но вы сказали, что хотите использовать Webpacker, поэтому ...

Включите определение диаграммы в свой application.js, а не в тег script. 

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

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

Это будет нацелено на этот холст в вашем HTML: 

<canvas id="backlog-chart" ... />
...