簡單Highcharts，但不運行

我是新的HTML和PHP。我遵循Highcharts.com的入門指南，我寫下了下面的HTML文件。我保存它像index2.htm，但它只顯示我「在劇本之前...」，沒有圖表出現。
請幫助我。非常感謝簡單Highcharts，但不運行

<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

你需要下載jQuery的，你正在尋找使用它的例子。 jQuery的CDN添加到頭部負荷的jQuery：

<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在文檔上啓動代碼的特定方式，但這可以由一般的預處理程序替代。」 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] 
       }] 
      });

下面是它的一個簡單的fiddle工作

來源

2017-04-24 19:01:45 Avitus

非常感謝，現在可以使用！ – Ciko

簡單Highcharts，但不運行

回答

相關問題