web-dev-qa-db-ja.com

ReferenceError：HighChartsが定義されていません

Railsアプリケーションのindex.html.erbファイルでhighstocksを使用してグラフをレンダリングしていますが、グラフを読み込もうとすると、firebugコンソールで次のエラーが発生します。

ReferenceError: HighCharts is not defined
new HighCharts.Chart({

私のindex.html.erbファイルは次のとおりです

<div id="quotes_chart", style="width=560px; height:300px;">
<script>
 $(function(){   
 new HighCharts.Chart({
  chart : {
   renderTo: "quotes_chart"
  },
  title : {
   text: "Daily trades" 
  },
  xAxis : {
    type: "datetime"
  },
  yAxis : {
    title: {
     text: "Shillings"
   }
  },
  tooltip : {
    formatter: function(){
      return HighCharts.dateFormat("%B %e, %Y", this.x) + ': ' + "Kshs" + Highcharts.numberFormat(this.y, 2);
    }
  },
  series: [
    <% { "Telecommunication" => StockQuote.telecomm, "Agriculture" => StockQuote.agric }.each do |name, prices|
%>
{
  name: <%= name %>,
  pointInterval: <%= 1.day * 1000 %>,
  pointStart: <%= 2.weeks.ago.to_i * 1000 %>,
  data: <%= (2.weeks.ago.to_date..Date.today).map { |date| StockQuote.price_on(date).to_f}.inspect%>
},
<% end %>
]
});
});
</script>
</div>

私のapplication.html.erbは次のとおりです。

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="components/highstock/highstock.js"></script>
 <%= javascript_include_tag "jquery-1.11.0.min", "highcharts" %>

私のアプリのassests/javascriptsフォルダーには、highcharts.comからダウンロードしたjquery-1.11.0.min.jsファイルとhighcharts.jsファイルの両方があります。

私は何を間違っているのでしょうか？

javascriptruby-on-railshighchartshighstock
7
Mutuma

ハイチャートをロードする必要があるのは1回だけで、2回ロードする必要はありません。したがって、以下のみを使用することをお勧めします。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="components/highstock/highstock.js"></script>

HighstockにはすべてのHighchartsオプションが含まれているためです。さらに、ファイルへの正しいパスには注意してください。問題のように見えるだけです。

2
Sebastian Bochan
var chart=null;
$(document).ready(function() {
    chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'bar'
                    },
                    title: {
                        text: '${model.title}'
                    }
...

知らない可能性のある複数の宣言が原因でこのエラーが発生する可能性があるため、チャートをnullに設定してください。すべてのインポートが正しいことを前提としています

3
gilberto Nd