遇到问题刚开Highchart显示(Having trouble just getting the

2019-06-25 18:54发布

我敢新的JavaScript,Rails和JQuery的所有一起工作。

我会通过本教程(http://www.highcharts.com/documentation/how-to-use#installation)上Highcharts,只是试图让基本图显示。 它没有发生。

在我home.html.erb文件我有:

<div id="container" style="width: 100%; height: 400px"></div>

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>

这是/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]
         }]
      });
   });

没有什么是显示出来,当我加载页面,我不知道为什么。 我已经做了教程3或4次,对于问题的答案没有用Google搜索左右。 任何帮助将非常感激。

编辑:我从脚本标记改变路径/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

Answer 1:

正如我们在聊天讨论,有几个缺少的部分。

  • 你所需要的Highcharts库的本地副本
  • 你需要引用您的脚本调用从正确的地方图书馆。

因此,简而言之,你在你的布局需要这样的:

<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 -->

现在,前进(假设你工作瓦特/导轨3.1+),我建议将您的JavaScript到一个更传统的位置。 在3.1中,导轨喜欢看到它在app/assets/javascripts ,但public/javascripts还是很好,只是不完全是传统的

您将通过了解得到了很多milage的轨道助手插入脚本标签和资产管道 。

祝好运!



Answer 2:

问题是在源是第一行var charts; 删除它,然后你做。



Answer 3:

有一个与图表关键字的问题。 请更改像

新Highcharts.Chart({图表是与小的C



文章来源: Having trouble just getting the Highchart to show