0
votes

Rails 6 et Highcharts

J'utilise Rails 6.0.0.rc1 et j'espère implémenter le gem lazy_high_charts . J'ai installé Highcharts via Yarn mais j'ai reçu l'erreur suivante:

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]

Qui fait référence à la ligne de code suivante:

{
  "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"
  }
}

J'ai vérifié si Highcharts est présent via le DOM, ce qui est le cas. Si j'ajoute le <script src="https://code.highcharts.com/highcharts.js"></script> dans mes balises <head> il se charge bien, ce qui est étrange. Toute aide serait appréciée.

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

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

Gemfile

ReferenceError: Can't find variable: Highcharts

ruby-on-rails ruby-on-rails-6

3 commentaires

Pouvez-vous montrer votre Gemfile?

Gemfile a été ajouté @Glyoko

J'ai trouvé la solution. Ajout de window.Highcharts = Highcharts; à mon application.js a fonctionné.

3 Réponses :

1
votes

J'ai trouvé la solution. Ajouter:

window.Highcharts = Highcharts;

à mon application.js fonctionné. Mes graphiques s'affichent maintenant.

1 commentaires

Si vous avez un peu de temps, consultez cette discussion sur les rails et le webpack / er youtube.com/watch?v=fKOq5_2qj54 spécialement autour de la minute 17, il montre ce cas où un ancien plugin javascript s'attend à ce que quelque chose soit sur la portée globale. Il montre la première solution en faisant quelque chose comme vous, mais vers la minute 23, il montre une meilleure solution "webpackish" plus moderne en utilisant le chargeur d'import-loader.

1
votes

Voici le contenu de mon application.js dans Rails 6 avec 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;

J'ai ajouté quelques extensions à titre d'exemple.

0 commentaires

0
votes

Dans le yarn add highcharts console, yarn add highcharts
Dans app/javascript/packs/application.js pour Rails 6 avec webpacket:

import Highcharts from 'highcharts';
require("highcharts/modules/data")(Highcharts)
require("highcharts/modules/exporting")(Highcharts)
require("highcharts/modules/offline-exporting")(Highcharts)
require("highcharts/modules/map")(Highcharts)
window.Highcharts = Highcharts;

0 commentaires