5

私は、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 回実行しましたが、Google で検索して答えを探しましたが、役に立ちませんでした。どんな助けでも大歓迎です。

編集: script タグのパスを から に変更しまし/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
4

3 に答える 3

7

チャットで話し合ったように、いくつかの欠落部分がありました。

  • 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では、レールはそれを見るのが好きですが、app/assets/javascripts それでもpublic/javascripts問題はなく、まったく従来型ではありません。

スクリプトタグとアセットパイプラインを挿入するためのレールヘルパーを理解することで、多くのマイレージを得ることができます。

幸運を！

于 2012-06-25T23:40:12.270 に答える
1

var charts; 問題は、それを削除するソースの最初の行にあり、完了です。

于 2012-10-20T13:20:11.080 に答える