我正在尝试运行一个简单的导轨(-v 5.1.4)应用程序,该应用程序实现了一个带有Amcharts库的样本之一。
这是做什么工作:
- 创建
/app/assets/javascripts/amcharts
文件夹 - 将第三方内容复制到
/app/assets/javascripts/amcharts
- 将
//= require amcharts
添加到/app/assets/javascripts/application.js
i运行Rails Server,并通过观看原始独立的HTML视图显示图表。因此,我认为编辑的代码正常工作。
这是工作:
- 创建
/vendor/assets(/javascripts)/amcharts
文件夹 - 将第三方内容复制到
/vendor/assets(/javascripts)/amcharts
- 将
//= require amcharts
添加到/app/assets/javascripts/application.js
- 将
config.assets.paths << Rails.root.join('vendor/assets(/javascripts)/amcharts')
添加到config/application.rb
- 将相对路径
../../../vendor/assets(/javascripts)/amcharts/$name$.js
添加到app/assets/application.js
当我运行Rails Server时,没有给出任何错误,但是该应用程序显示一个空白的白页,而不是图形,该页面的源代码如预期显示了我的View-File代码。
由于我各自的视图称为 amcharts.html.erb
,所以我的 app/assets/javascripts/
-folder中有一个 amcharts.coffee
-file。可能是链轮错误地认为这是它需要的文件吗?
我也想知道app/config/manifest.js
是用什么。app/assets/javascript/application.js
文件中似乎都进行了所有相关的更改...
编辑:我的View-File app/views/amcharts/index.html.erb
的缩短版本(Amcharts LIB的样本的修改代码)
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
var chart;
var chartData = [ { $data } ];
AmCharts.ready(function () {
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
$AmCharts.funs
chart.write("chartdiv");
});
</script>
我有机会与专业人士共享我的文件,他解决了问题。要走的路是:
- 安装宝石'amcharts-rails','rails-assets-amcharts3'
- 添加
//= require amcharts3
,//= require amcharts3/serial
到App/Assets/JavaScripts/application.js
我仍然想知道如何包括供应商/资产中的第三方 - 容器。但是,由于整个过程现在在错误的文件夹中没有文件工作,因此我将其标记为回答。感谢所有试图提供帮助的人!
将JS软件包直接放在vendor/assets
下,而不是在vendor/assets/javascripts
中。例如,通过//= require amcharts
添加/vendor/assets/amcharts/amcharts.js
库。
对于一个更具体的示例,这是我的结构方式,包括Rails 5应用程序中的DataTables库:
vendor/assets/DataTables-1.10.16/js/dataTables.bootstrap4.js
vendor/assets/DataTables-1.10.16/js/jquery.dataTables.js
vendor/assets/DataTables-1.10.16/css/dataTables.bootstrap4.css
(注意vendor/assets
下方的文件夹层次结构正是DataTables提供的。)
application.css:
/*
*= css/dataTables.bootstrap4
*/
application.js:
//= require js/jquery.dataTables
//= require js/dataTables.bootstrap4