如何在webpacker rails 6中使用chart.js

Webpacker是Rails 6中默认集成的前端打包工具，用于管理和构建JavaScript、CSS和其他静态资源。它可以与Chart.js集成，以在Rails应用程序中使用图表。

以下是在Webpacker Rails 6中使用Chart.js的步骤：

步骤1：安装Chart.js和相关库在Rails应用程序的根目录下，使用npm或yarn安装Chart.js和相关库：

$ npm install chart.js

或者

$ yarn add chart.js

步骤2：创建一个chart.js文件在app/javascript/packs目录下创建一个新的chart.js文件，该文件将包含用于创建和渲染图表的代码。

import Chart from 'chart.js';

document.addEventListener('DOMContentLoaded', () => {
  const ctx = document.getElementById('myChart').getContext('2d');
  new Chart(ctx, {
    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
        }
      }
    }
  });
});

步骤3：在视图中引入图表在需要显示图表的视图文件中，添加一个canvas元素，并为其指定一个id（例如myChart）。

<canvas id="myChart" width="400" height="200"></canvas>

步骤4：在Webpacker中引入chart.js文件在app/javascript/packs/application.js文件中添加以下代码：

import './chart.js';

步骤5：重新编译和加载运行以下命令重新编译和加载Webpacker包含的文件：

$ bin/webpack

步骤6：启动Rails服务器启动Rails服务器，并在浏览器中访问相应的视图页面，您将看到Chart.js图表成功渲染。

这样，您就可以在Webpacker Rails 6中使用Chart.js来创建和展示各种图表。

请注意，以上步骤假设您已经正确配置了Rails 6和Webpacker，并且您的应用程序使用Webpacker作为默认的前端打包工具。

有关更多信息和示例，请参阅Chart.js官方文档：Chart.js官方文档

生产中未定义Chartkick

我已经根据文档(我相信)设置了Chartkick，但我得到了有什么想法吗？事情有没有顺序，不对吗？它在开发中运行良好。

浏览 0提问于2019-09-15得票数 0

2回答

如何使用webpacker在Rails 6应用程序上启用ssr并作出反应

、、

我猜想，由于新搭建的Rails应用程序使用webpacker，添加一个类似react的宝石将是一种反模式。也就是说，是否有一种规范的方法可以在rails应用程序上启用带有react的ssr，或者我也需要运行节点呢？

浏览 2提问于2020-04-04得票数 1

2回答

在没有webpack(呃)的情况下运行Rails 6可行吗？

、、、

我正在启动一个新的Rails 6应用程序。如果我的理解正确的话，Webpack(呃) (gem webpacker)已经取代链轮成为包含/缩小JS ()的新标准。此外，Rails 6现在都需要。我是否正确地假设Node.js和Yarn依赖仅仅是因为包含了Webpack，还是Rails 6的其他组件也需要它们？除去Rails 6应用程序中的Webpack、Node和Yarn，以及继续使用Rails资产管道(除了缺少Webpack功能之外)，是否存在任何缺陷？

浏览 0提问于2020-10-21得票数 4

回答已采纳

3回答

如何在webpacker中使用react-rails？

、、、、

我用webpacker创建了一个示例项目react-rails。但显示错误“未捕获ReferenceError:未定义人员”。请告诉我如何在webpacker中使用react-rails？Rails版本Rails 5.0.2react-rails (2.1.0)创建Rails项目 $ rails</em

浏览 0提问于2017-04-22得票数 5

1回答

图表:未定义的方法`line_chart‘

、

我正在开发一个Rails 6应用程序，我正在尝试为我的应用程序中的图表设置。我用这种方式安装了纱线加图chart.js 要求(“图表”)要求(“chart.js”) gem 'groupdate' 然后运行bundle insta

浏览 5提问于2020-09-07得票数 0

回答已采纳

1回答

如何在rails* 6版本中使用Rails的js.erb特性*

、、

如何在rails 6版本中使用Rails的js.erb特性？对于带有webpacker的Rails6，我们需要添加Jquery作为自定义选项。有没有办法让js.erb正常工作。我让jquery使用下面的设置 const { environment } = require('@rails/webpacker') const webpack = require("webpack"

浏览 16提问于2020-01-24得票数 1

2回答

如何在webpacker* gem rails 5.1中使用react-rails react_component？*

、、、

这里是新手，我最近在我的react-rails项目中实现了webpacker gem。对于来自rails背景的webpack和react来说，这个宝石对我来说很有意义。我想知道是否有可能在我的rails webpacker项目中使用react-rails gem，这样我们仍然可以像这样使用view helper方法： <%= react_component('MyComponent

浏览 1提问于2017-03-04得票数 3

1回答

当使用rails* webpacker时，我们应该将manifest.json文件提交给git吗？*

、、、

我使用webpacker在Rails上进行反应安装。我所面临的问题是在舞台环境上。 Your webpack configuration is not creating a manifest.我认为它应该存在，因为rails预编译了资产。另外，webpacker如何在生产环境中创建manifest.json文件？

浏览 0提问于2018-01-24得票数 2

回答已采纳

1回答

如何让Select2在生产中与rails* 6应用程序协同工作？*

、、、、

我有一个Rails 6应用程序。我使用的是select2插件。它在开发中可以工作，但在生产中不能工作(Heroku)。()require("jquery")require("chart.js") "@<em

浏览 19提问于2020-03-21得票数 1

3回答

如何在rails* webpacker3中使用jQuery*

、、

我生成了一个新的rails应用程序：rails new titi --webpack=vuemodule.exports = { vue_resource: "vue-resource/dis

浏览 2提问于2017-09-01得票数 13

1回答

对于基于jquery的库Rails* 6 Webpack来说，获取不是函数错误。*

、、、

但是，JQuery不适用于我在项目中使用的任何其他东西。我目前正在运行Rails 6/ruby 2.6.3。我会列出错误/webpack配置，我有。如何将jQuery设置为全局工作？owl.carousel"; require("chartkick");environment.js c

浏览 2提问于2020-03-23得票数 0

1回答

Webpacker:启用监视模式还是卸载webpacker:从资产编译:在Rails中预编译任务？

、

Rails服务器在引擎盖下运行Webpacker编译器可以编译所有文件，而不仅仅是重新加载时修改的文件。如何在Webpacker中启用监视模式，以便每次修改资产时，都会重新编译唯一触及的资产，从而修复重新加载，从而使开发变得轻而易举。因为我找不到第一点的任何解决方案，所以我想从资产:预编译中解锁Webpacker:编译任务。虽然我可以通过禁用W

浏览 0提问于2018-11-20得票数 0

1回答

用webpacker加载字体和图像

、、、、

我试图简单地使用Webpacker将资产(字体/图像)加载到Rails项目中。事实证明，这比应该要困难得多。// file.js test: /\.[ext]", } // enviro

浏览 2提问于2018-05-23得票数 3

回答已采纳

1回答

rails 5.1.4使用vue和webpacker，在部署时编译错误

、、、、

我有一个问题，部署一个简单的rails应用程序与webpacker和vue的数字海洋液滴。以及我如何在组件中使用它：在服务器上输出“RAILS_ENV=production bin/bundle exec资产:预编译-跟踪” **

浏览 8提问于2017-10-13得票数 2

回答已采纳

1回答

如何在AWS部署中使用特定的节点版本进行yarn设置？

、、、

我已经在现有的rails应用程序中使用yarn和webpacker进行react设置。但是，我在AWS部署中安装失败，出现以下错误。Webpacker requires Node.js >= 6.0.0 and you are using 0.10.48纱线接收链接：

浏览 16提问于2018-01-19得票数 1

1回答

如何在rails中使用npm包(react-datepicker)？

、

我有一个带有webpacker和react-rails gem的Rails 5应用程序。我想试试https://reactdatepicker.com/套餐。我使用yarn add react-datepicker安装它如何在我的代码中使用它？

浏览 20提问于2019-03-13得票数 1

1回答