只需让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屋！