stimulusjs - 使用 rails 和stimulusJS 运行 Chart.js 示例

Question

我想使用StimulusJS在 Ruby on Rails中运行Chart.js的第一个示例。但由于某种原因，它只是渲染了一个空画布（参见 [ 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

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

2. 导入并注册：

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