Запустите пример Chart.js с рельсами и стимуломJS

Question

Я хочу запустить первый пример Chart.js внутри Ruby on Rails с помощью StimulusJS . Но по какой-то причине он просто отображает пустой холст (см. [ ]).

Это HTML:

      <div data-controller="linechart">
  <canvas data-linechart-target="myChart" width="400" height="400"></canvas>
</div>

и вот мой контроллер стимула:

      import {Controller} from "@hotwired/stimulus"
import Chart from 'https://cdn.skypack.dev/chartjs';

export default class extends Controller {
    static targets = ['myChart'];

    canvasContext() {
        return this.myChartTarget.getContext('2d');
    }

    connect() {
        new Chart(this.canvasContext(), {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }
}

Что мне не хватает?

Answer 1

1. Я думаю, что вы не импортируете правильную библиотеку. URL-адрес должен быть 'https://cdn.skypack.dev/chart.js'

2. Импорт и регистрация:

           import { Chart, registerables } from 'https://cdn.skypack.dev/chart.js';
   Chart.register(...registerables);