我有同样的斗争这个周末，并不断发生在这篇文章，所以张贴我的解决方案在这里。
有几件事值得注意：

1. chart.js似乎有一些硬编码的附件文件没有在CDN中注册为依赖项。例如，我的文件在 * c1719c72.js * 和 * chunks/helpers. segment. js * 上保持404ing。因此，如果在运行bin/importmap pin时不使用 *--download * 标记，效果会更好。Using chart.js with importmaps in rail 7.
   1.从chart.js导入Chart需要一些技巧：Chart.js - Where do I find which components should be registered?。特别是下面barchart_controller. js的第3 - 4行。

下面是我在一个相当普通的带有导入Map的Rails7构建中使用的文件内容的摘要：

config/importmap.rb-注：运行bin/importmap pin chart.js应该引入一个依赖项（@kurkle/color），一定要跳过--下载，否则您将陷入痛苦的境地。

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

pin "chart.js", to: "https://ga.jspm.io/npm:chart.js@4.2.0/dist/chart.js"
pin "@kurkle/color", to: "https://ga.jspm.io/npm:@kurkle/color@0.3.2/dist/color.esm.js"

app/javascript/application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"

import "chart.js"

app/javascript/controllers/barchart_controller.js

import {Controller} from "@hotwired/stimulus"

import { Chart, registerables } from "chart.js";
Chart.register(...registerables);

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
                    }
                }
            }
        });
    }
}

我的模型的app/views/widgets/show.html.erb中div的内容

<div data-controller="barchart">
  <canvas id="bar-chart" data-barchart-target="myChart" width="800" height="450"></canvas>
</div>

不要忘记重新构建资产（bin/rails资产：precompile）。