シンプルなハイチャートだが実行されない

私はHTMLとPHPで新しいです。私はHighcharts.comのGetting Startedガイドに従っており、私は以下のHTMLファイルを書いています。 index2.htmのように保存しますが、「スクリプトの前に...」と表示され、グラフは表示されません。
私を助けてください。どうもありがとうシンプルなハイチャートだが実行されない

<DOCTYPE HTML> 
<html> 
<head> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <title>Highcharts Example</title>       
</head> 
<body> 
    <div id="container" style="width:100%; height:400px;"></div> 
    <p>Before the script...</p> 
    <script> 
     $(function() { 
      var myChart = Highcharts.chart('container', { 
       chart: { 
        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, 19] 
       }] 
      }); 
     }); 
    </script> 

</body> 
</html> 
</pre>

出典

2017-04-24 Ciko

をコンソールにエラーがありますか？ – wergeld

を作業それの簡単なfiddleです。負荷jqueryのに頭にjqueryのCDNを追加します。

<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>

は、以下の私のコードを参照してください：

<DOCTYPE HTML> 
<html> 
<head> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script> 
    <title>Highcharts Example</title>       
</head> 

<body> 
    <div id="container" style="width:100%; height:400px;"></div> 
    <p>Before the script...</p> 
<script> 

    $(function() { 
      var myChart = Highcharts.chart('container', { 
       chart: { 
        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, 19] 
       }] 
      }); 
     }); 
}); 


    </script> 

</body> 
</html>

出典

2017-04-24 19:11:40 Wiredo

ありがとう、それは素晴らしい;） – Ciko

私の答えを編集しました。実際には、ドキュメントに従ってdocument.readyは必要ありません。すでにコードを呼び出しています： "上記のコードでは、ドキュメント上でコードを起動するためのjQuery固有の方法を使用していますが、これは一般的なonreadyハンドラに置き換えることができます。 https://www.highcharts.com/docs/getting-started/your-first-chart – Wiredo

それが動作しない理由は、あなたが匿名jQueryの機能でそれを包みましたし、jQueryの参照を含めていないということです。

あなただけがするスクリプトです変更する場合：

var myChart = Highcharts.chart('container', { 
       chart: { 
        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, 19] 
       }] 
      });

ここであなたは、あなたがそれを使用して見ている例としてはjQueryをロードする必要が

出典

2017-04-24 19:01:45 Avitus

ありがとう、それは今作動する!! – Ciko

シンプルなハイチャートだが実行されない

答えて

関連する問題