使用Rail 7中的ImportMaps的Chart.js

Question

正在尝试将ChartJS与Rails 7中的

我

     bin/importmap pin "chart.js@^3.8.0" --download

ImportMaps

    import 'chart.js'

集成对于ES模块，

Get http://localhost:5000/_/e09df68b.js` net::ERR_ABORTED 404 (Not Found)    chart.js-67657cw24cb.js:1 

我缺少某些内容，或者还无法整合图表。JS与Rails 7

Answer 1

我能够通过从CDN获取图书馆而不是下载它来解决此问题。为此，我首先取消了下载的版本：

bin/importmap unpin chart.js --download

然后我将其重新固定而不下载：

bin/importmap pin chart.js

现在它可以使用！

Answer 2

截至2023年8月，在

importMap
在config/importmap.rb中，add：

pin "chartkick", to: "chartkick.js"
pin "Chart.bundle", to: "Chart.bundle.js"

以及在app/javascript/application.js中，添加：

import "chartkick"
import "Chart.bundle"

Answer 3

手动下载和固定来自JSDELIVR.com的软件包为我工作。

• （esm）
• https://wwwww.jsdelivr.com/ppackage/ppackage/npm/@ kurkle/color （EMS）

下载curl中的供应商/javaScript：

curl https://cdn.jsdelivr.net/npm/[email protected]/+esm -o vendor/javascript/chart.js.js
curl https://cdn.jsdelivr.net/npm/@kurkle/[email protected]/+esm -o vendor/javascript/kurklecolor.js

手动将图表中的导入语句更改为：js.js文件中：

import {Color as t} from "kurklecolor"

手动将销钉添加到您的config/importmap.rb ：

pin 'chart.js' # https://cdn.jsdelivr.net/npm/[email protected]/+esm
pin 'kurklecolor' # https://cdn.jsdelivr.net/npm/@kurkle/[email protected]/+esm

现在，您只需遵循官方Chart.js文档即可。下面的一个工作示例。

添加到您的视图中：

<canvas id="acquisitions"></canvas>

添加到刺激控制器中：

import { Controller } from '@hotwired/stimulus';
import { Chart, Colors, BarController, CategoryScale, LinearScale, BarElement, Legend } from 'chart.js'

export default class extends Controller {

  connect() {
    Chart.register(Colors, BarController, BarElement, CategoryScale, LinearScale, Legend);

    const data = [
      { year: 2010, count: 10 },
      { year: 2011, count: 20 },
      { year: 2012, count: 15 },
      { year: 2013, count: 25 },
      { year: 2014, count: 22 },
      { year: 2015, count: 30 },
      { year: 2016, count: 28 },
    ];

    new Chart(
      document.getElementById('acquisitions'),
      {
        type: 'bar',
        data: {
          labels: data.map(row => row.year),
          datasets: [
            {
              label: 'Acquisitions by year',
              data: data.map(row => row.count)
            }
          ]
        }
      }
    );
  }
}