无法显示高图

Having trouble just getting the Highchart to show

本文关键字：高图 显示      更新时间：2023-09-26

我对Javascript，Rails和JQuery都很陌生。

我正在Highcharts上完成本教程（http://www.highcharts.com/documentation/how-to-use#installation），只是想显示一个基本图。它没有发生。

在我的 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 次教程，并在谷歌上搜索答案无济于事。任何帮助将不胜感激。

编辑：我将脚本标签中的路径从/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

正如我们在聊天中讨论的那样，有一些缺失的部分。

  • 您需要 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 -->

现在继续前进（假设你正在使用 rails 3.1+），我建议将你的 javascript 移动到一个更传统的位置。 在 3.1 中，rails 喜欢在 app/assets/javascripts 中看到它，但public/javascripts仍然很好，只是不完全是传统的。

通过了解用于插入脚本标签和资源管线的 rails 帮助程序，您将获得很多好处。

祝你好运！

问题出在源的第一行，var charts;将其删除，您就完成了。

图表关键字存在问题。请更改喜欢

new Highcharts.Chart（{ Chart is with small c

相关文章：