只需让Highchart展示就会遇到麻烦 [英] Having trouble just getting the Highchart to show
问题描述
我对JavaScript,Rails和JQuery都很熟悉,它们一起工作。
我正在阅读本教程(http://www.highcharts.com / documentation / how-to-use#installation),并试图获得一个基础图表。没有发生。
在我的home.html.erb文件中,我有:
< div id =containerstyle =width:100%; height:400px>< / div>
在 app / views / layouts / application.html.erb中
我在 head
tag:
< script src =http://ajax.googleapis.com /ajax/libs/jquery/1.7.1/jquery.min.jstype =text / javascript>< / script>
< script src =/ public / highcharts.jstype =text / javascript>< / script>
这是/public/highcharts.js中的代码:
var chart1; //全局可用
$(document).ready(function(){
chart1 = new Highcharts.Chart({
chart:{
renderTo:'container',
type:'bar'
},
title:{
text:'水果消耗'
},
xAxis:{
categories:[ '苹果','香蕉','橘子']
},
yAxis:{
标题:{
text:'吃水果'
}
$,
系列:[{
name:'Jane',
data:[1,0,4]
},{
name:'John' ,
data:[5,7,3]
}]
});
});
当我加载页面时没有任何显示,我不知道为什么。我已经完成了教程3次或4次,并且Google无法找到答案。任何帮助将非常感激。
编辑:我将脚本标记中的路径从 /public/highcharts.js
到 /highcharts.js
。在我的控制台调试器中给了我以下错误:
Uncaught ReferenceError:Highcharts未定义highcharts.js:3
(匿名函数)highcharts.js:3
f.Callbacks.n jquery.min.js:2
f.Callbacks.o.fire与jquery.min.js:2
e。 extend.ready jquery.min.js:2
c.addEventListener.B
正如我们在聊天中讨论的那样,有一些缺失的部分。
- 您需要本地副本Highcharts库
- 您需要引用从
正确位置调用库的脚本。
因此,简而言之,您需要在布局中使用它:
< script src =http:/ /ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.jstype =text / javascript>< / script>
< script src =/ javascripts / js / highcharts.jstype =text / javascript>< / script> <! - 放置高图表库的地方 - >
< script src =/ highcharts.jstype =text / javascript>< / script> <! - 您的脚本 - >
现在继续前进(假设您使用的是rails 3.1+),我建议您移动javascripts到更多常规位置。在3.1中,rails喜欢在 app / assets / javascripts
中看到它,但是 public / javascripts
仍然正常,正确的常规。
通过了解 rails helpers 插入脚本标记和资产管道。
祝你好运!
I'm pretty new to Javascript, Rails and JQuery all working together.
I'm going through this tutorial (http://www.highcharts.com/documentation/how-to-use#installation) on Highcharts and just trying to get a base graph to show. It's not happening.
In my home.html.erb file I have:
<div id="container" style="width: 100%; height: 400px"></div>
In app/views/layouts/application.html.erb
I have this in my head
tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/public/highcharts.js" type="text/javascript"></script>
And this is the code in /public/highcharts.js:
var chart1; // globally available
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
Nothing is showing up when I load the page and I have no idea why. I've done the tutorial 3 or 4 times and Googled around for the answer to no avail. Any help would be hugely appreciated.
Edit: I changed the path in the script tag from /public/highcharts.js
to /highcharts.js
. That gave me the following errors in my Console Debugger:
Uncaught ReferenceError: Highcharts is not defined highcharts.js:3
(anonymous function) highcharts.js:3
f.Callbacks.n jquery.min.js:2
f.Callbacks.o.fireWith jquery.min.js:2
e.extend.ready jquery.min.js:2
c.addEventListener.B
As we discussed in chat, there were a few missing pieces.
- You needed a local copy of the Highcharts library
- You needed to reference your script that calls the library from the correct place.
So, in short, you needed this in your layout:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/javascripts/js/highcharts.js" type="text/javascript"></script> <!--where you put the high charts library -->
<script src="/highcharts.js" type="text/javascript"></script> <!-- your script -->
Now going forward (assuming you are working w/ rails 3.1+), I'd suggest moving your javascripts to a more conventional location. In 3.1, rails likes to see it in app/assets/javascripts
but public/javascripts
is still fine, just not exactly conventional.
You will get a lot of milage by understanding the rails helpers to insert script tags and the Asset Pipeline.
Good luck!
这篇关于只需让Highchart展示就会遇到麻烦的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!