Javascript没有出现在Rails 4.（Highchart） [英] Javascript not showing up in Rails 4. (Highchart)
问题描述
我在一个简单的Rails应用程序中包含了Highcharts，它工作得很好。但是当我在一个更复杂的Rails应用程序中做了同样的事情时，Chart代码没有显示出来。
这是我迄今为止所做的：
Gemfile
gemhighcharts-rails，〜> 3.0.0
// =需要highcharts
// =需要highcharts / highcharts-more
show.html.erb
< div class =panel panel-default>
< div class =panel-heading> Chart< / div>
< div id =containerstyle =width：100％; height：400px;>
< / div>
< script type =text / javascriptcharset =utf-8>
$（function（）{
$（document）.ready（function（）{
Highcharts.setOptions（{
global：{
useUTC：false
$ b $（'＃container'）。highcharts（{
图表：{
type：' spline'，
动画：Highcharts.svg，//不要在旧版IE
中设置动画效果marginRight：10，
events：{
load：function（）{
//设置每秒更新图表
var series = this.series [0];
setInterval（function（）{
var x =（new Date （））。getTime（），//当前时间
y = Math.random（）;
series.addPoint（[x，y]，true，true）;
}，1000） ;
}
}，
title：{
text：'实时随机数据'
}，
xAxis：{
类型：'datetime'，
tickPixelInterval：150
}，
yAxis：{
title：{
text：'Value'
}，
plotLines：[{
value：0，
width：1，
color：'＃808080'
}]
}，
tooltip：{
formatter： function（）{
return'< b>'+ this.series.name +'< / b>< br />'+
Highcharts.dateFormat（'％Y-％m - ％d％H：％M：％S'，this.x）+'< br />'+
Highcharts.numberFormat（this.y，2）;
}
}，
图例：{
启用：false
}，
导出：{
启用：false
} ，
series：[{
name：'Random data'，
data：（function（）{
//生成一个随机数据数组
var data = （i = -19; i <= 0; i ++）{$，
time =（new Date（））.getTime（），
i;
b $ b data.push（{
x：time + i * 1000，
y：Math.random（）
}）;
}
返回数据;
}）（）
}]
}）;
}）;
}）;
< / script>
< / div>
有人知道我做错了什么吗？谷歌说它可能与涡轮链接有关，但它不会在其他应用程序上工作......
第二个问题。我怎么能把这个代码添加到channel.js.coffee中，所以这个页面上没有js？
在此先感谢！
当我开始使用highcharts时，遇到了与此类似的东西。我知道这个问题有点老了，但我想写这个供参考，以防其他人遇到这个问题。
这是我做了什么来得到我的图表（参考资料，我正在运行Rails 4.0.2和Ruby 2.1.1，以及最新的高级图和最新的highcharts-rails gem）：
首先，确保所有的highcharts.js文件都加载到你的assets / javascript目录中。
在你的application.js文件中，你应该按照以下顺序： / p>
// =需要jquery
// =需要jquery_ujs
// =需要turbolinks
// =需要highcharts
// = require_tree。
其次，要将代码从show.html.erb文件中取出，我不知道关于coffeescript，但您可以在/ assets / javascript中创建名为chart.js的js文件。把你的javascript放到这个文件中，从 $ b
$（function（）{
请确保chart.js中的（'#container'）与您html.erb文件中div的id相匹配。 p>
/assets/javascript/chart.js
$（'＃容器'）.highcharts（{
show.html.erb：
< div id =containerstyle =width：100％; height：400px;>< / div>
我不需要移除或关闭turbolinks以获得任何此功能。但是，当我设置我的导航栏链接，我希望我的页面在重新打开后刷新（以确保显示最新信息，而不是缓存的信息），因此在我的导航栏中，我通过向包含链接的导航栏div添加无数据涡轮链接来删除turbolinks功能。如下所示：
< div class =navdata-no-turbolink>
... navbar co de here
< / div>
这里有一个指向turbolinks的github repo的链接 - 阅读文档，因为它提供了关于什么turbolinks这样做，为什么它有帮助，并且（当你不想使用它时）如何关闭它。
https://github.com/rails/turbolinks/blob/master /README.md
最后一件事 - 当我最终得到我的图表（tada！）时，他们应用了高热量主题。我只是从/ assets / javascript中删除了highchart主题文件夹，它们看起来不错。
I've included Highcharts in a simpler Rails Application and it works just fine. but when I did the same thing in a more complex Rails Application the Javascript code the Chart is not showing up.
here's what I did so far:
Gemfile
gem "highcharts-rails", "~> 3.0.0"
application.js
//= require highcharts
//= require highcharts/highcharts-more
show.html.erb
<div class="panel panel-default">
<div class="panel-heading">Chart</div>
<div id="container" style="width:100%; height:400px;">
</div>
<script type="text/javascript" charset="utf-8">
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});
</script>
</div>
Does anybody know what I did wrong? Google tells it might have something to do with turbolinks, but then it wouldnt work on the other application too...
And quick second question. How could I add this code to channel.js.coffee so there's no js on this page? thanks in advance!
I ran into something very similar to this when I started working with highcharts. I know this question is a bit old, but I wanted to write this for reference in case anyone else runs into this issue.
Here is what I did to get my charts to work (for reference, I'm running Rails 4.0.2 and ruby 2.1.1. and the latest highcharts with the latest highcharts-rails gem):
First, be sure that all the highcharts.js files are loaded into your assets/javascript directory.
In your application.js file, you should have the following in this order:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require highcharts
//= require_tree .
Second, to get the code out of your show.html.erb file, I don't know about coffeescript, but you can create a js file in /assets/javascript called chart.js. Put your javascript into this file, starting with
$(function () {
Make sure that ('#container') in your chart.js matches the id of the div in your html.erb file. Like this:
/assets/javascript/chart.js
$('#container').highcharts({
show.html.erb:
<div id="container" style="width:100%; height:400px;"></div>
I didn't need to remove or turn off turbolinks to get any of this to work. However, when I set up my navbar links, I wanted my pages to refresh upon reopen (to ensure the latest information was presented, not the cached information) so in my navbar, I did remove the turbolinks functionality by adding data-no-turbolinks to the navbar div which contained my links. As follows:
<div class="nav" data-no-turbolink>
... navbar code here
</div>
Here's a link to the github repo for turbolinks - read the documentation as it gives good information on what turbolinks does, why it's helpful, and (when you don't want to use it) how to turn it off. https://github.com/rails/turbolinks/blob/master/README.md
One last thing - when I finally got my charts to render (tada!), they had the highcharts themes applied. I simply removed the highchart theme folder from /assets/javascript and they look great.
这篇关于Javascript没有出现在Rails 4.（Highchart）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
