javascript 只是让 Highchart 显示有问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11198568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Having trouble just getting the Highchart to show
提问by Zack Shapiro
I'm pretty new to Javascript, Rails and JQuery all working together.
我对 Javascript、Rails 和 JQuery 一起工作还很陌生。
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.
我正在阅读 Highcharts 上的本教程 (http://www.highcharts.com/documentation/how-to-use#installation)，并试图获得一个基本图来显示。它没有发生。
In my home.html.erb file I have:
在我的 home.html.erb 文件中，我有：
<div id="container" style="width: 100%; height: 400px"></div>
<div id="container" style="width: 100%; height: 400px"></div>
In app/views/layouts/application.html.erbI have this in my headtag:
在app/views/layouts/application.html.erb我的head标签中有这个：
<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:
这是 /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.
当我加载页面时没有显示任何内容，我不知道为什么。我已经完成了 3 到 4 次教程，并在谷歌上搜索了答案，但无济于事。任何帮助将不胜感激。
Edit: I changed the path in the script tag from /public/highcharts.jsto /highcharts.js. That gave me the following errors in my Console Debugger:
编辑：我改变了路径在脚本标签从/public/highcharts.js到/highcharts.js。这给了我控制台调试器中的以下错误：
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
回答by Brian
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.
- 您需要 Highcharts 库的本地副本
- 您需要引用从正确位置调用库的脚本。
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 conventionallocation. In 3.1, rails likes to see it in app/assets/javascriptsbut public/javascriptsis still fine, just not exactly conventional.
现在继续前进（假设您正在使用 rails 3.1+ 工作），我建议将您的 javascripts 移动到更传统的位置。在 3.1 中，rails 喜欢看到它，app/assets/javascripts但public/javascripts仍然很好，只是不完全是传统的。
You will get a lot of milage by understanding the rails helpersto insert script tags and the Asset Pipeline.
通过了解rails 助手插入脚本标签和资产管道，您将获得很多成功。
Good luck!
祝你好运！
回答by Sahil
The problem is in the first line of source that is var charts;remove it and you are done.
问题出在var charts;删除它的源代码的第一行，您就完成了。
回答by satyanarayan mishra
There is an issue with the Chart keyword. Please change like
Chart 关键字存在问题。请改变喜欢
new Highcharts.Chart({ Chart is with small c
new Highcharts.Chart({ 图表带有小 c
