运行 Chart.js rails 和 stimulusJS 的例子

Question

我要运行第一个例子Chart.js inside Ruby on Rails using StimulusJS. But for some reason it just renders an empty canvas (see [3]).

这是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

我认为您没有导入正确的库。 URL 应该是 'https://cdn.skypack.dev/chart.js'

导入并注册：

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

运行 Chart.js rails 和 stimulusJS 的例子

Run Chart.js example with rails and stimulusJS

stimulusjs

hotwire-rails

ruby-on-rails-7