Ruby on rails Rails 6和Highcharts

我正在使用Rails 6.0.0.rc1并希望实现gem。我通过安装Highcharts，但收到以下错误：

ReferenceError: Can't find variable: Highcharts

这是指以下代码行：

window.chart = new Highcharts.Chart(options);

我检查了Highcharts是否通过DOM存在，它确实存在。如果我在我的

标签中添加

脚本，它会加载得很好，这很奇怪。任何帮助都将不胜感激

javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require("trix")
require("@rails/actiontext")

import Highcharts from 'highcharts';
import 'bootstrap'

package.json

{
  "name": "app_name",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/actiontext": "^6.0.0-rc1",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "bootstrap": "^4.3.1",
    "highcharts": "^7.1.2",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "trix": "^1.0.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.7.1"
  }
}

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.3'
gem 'rails', '~> 6.0.0.rc1'
gem 'pg', '>= 0.18', '< 2.0'
gem 'puma', '~> 3.11'
gem 'sass-rails', '~> 5'
gem 'webpacker', '~> 4.0'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'image_processing', '~> 1.2'
gem 'bootsnap', '>= 1.4.2', require: false
gem 'lazy_high_charts'

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  gem 'webdrivers'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

源代码'https://rubygems.org'
git|u源（：github）{| repo |“https://github.com/#{repo}.git}
ruby“2.6.3”
gem'rails'，“~>6.0.0.rc1”
宝石'pg'，'>=0.18'，'<2.0'
宝石“彪马”，“大于3.11”
gem'sass rails'，“~>5”
gem'webpacker'，“~>4.0”
gem“涡轮链接”，“大于5”
gem'jbuilder'，“~>2.5”
gem‘图像处理’，“~>1.2”
gem'bootsnap'，'>=1.4.2'，require:false
gem“懒散图表”
小组：开发，：测试
gem'byebug'，平台：[：mri，：mingw，：x64_mingw]
结束
小组：发展怎么办
gem“web控制台”，“>=3.3.0”
gem'listen'，'>=3.0.5'，'<3.2'
宝石“春天”
gem‘SpringWatcherListen’，“~>2.0.0”
结束
组：测试do
gem‘水豚’，“>=2.15”
gem“selenium webdriver”
gem“webdrivers”
结束
gem'tzinfo data'，平台：[:mingw，:mswin，:x64_mingw，:jruby]

我找到了解决办法。添加：

window.Highcharts = Highcharts;

---

到我的

application.js

工作了。我的图表现在显示出来。

我找到了解决方案。添加：

window.Highcharts = Highcharts;

---

到我的

application.js

工作了。现在显示我的图表。

以下是我在Rails 6和webpacker中的

应用程序.js

的内容：

import Highcharts from 'highcharts'
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsSolidGauge from 'highcharts/modules/solid-gauge';
import HighchartsExporting from 'highcharts/modules/exporting';

window.jQuery = jQuery
window.$ = $
window.Highcharts = Highcharts;

---

我添加了一些扩展作为示例。

以下是我的

应用程序.js

在Rails 6和webpacker中的内容：

import Highcharts from 'highcharts'
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsSolidGauge from 'highcharts/modules/solid-gauge';
import HighchartsExporting from 'highcharts/modules/exporting';

window.jQuery = jQuery
window.$ = $
window.Highcharts = Highcharts;

我添加了一些扩展作为示例

在控制台中添加高图表

在

app/javascript/packs/application.js中，对于带有网页包的Rails 6：

在控制台中添加高图表

在

app/javascript/packs/application.js中，对于带有网页包的Rails 6：

---

你能展示你的Gemfile吗？Gemfile已经被添加了@GlyokoI，我已经找到了解决方案。添加窗口。Highcharts=Highcharts；我的application.js工作了。你能显示你的Gemfile吗？Gemfile已经添加了@GlyokoI，我已经找到了解决方案。添加窗口。Highcharts=Highcharts；如果你有时间，请特别在第17分钟查看关于rails和webpack/er的讨论，他展示了一个旧的javascript插件希望在全局范围内出现的情况。他展示了第一个解决方案，就像你做的一样，但在第23分钟左右，他展示了一个更好、更现代的使用导入加载程序的“网页包”解决方案。如果你有时间，请特别在第17分钟左右查看关于rails和网页包/er的讨论，他展示了一个旧的javascript插件希望全局范围内有一些东西的情况。他展示了第一个解决方案，就像你做的一样，但在第23分钟左右，他展示了一个更好、更现代的解决方案，一个使用导入加载程序的“网页式”解决方案。