highcharts不能在網站工作

我是一個新的在JavaScript中。我想通過在我的網站中使用highcharts繪製一個堆棧條形圖。我複製演示代碼here，然後將其粘貼到我的php本地主機中，但我的網站中沒有任何高代碼。有什麼問題？highcharts不能在網站工作

碼↓

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#container").highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Stacked column chart' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Total fruit consumption' 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       } 
      } 
     }, 
     legend: { 
      align: 'right', 
      x: -30, 
      verticalAlign: 'top', 
      y: 25, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false 
     }, 
     tooltip: { 
      headerFormat: '<b>{point.x}</b><br/>', 
      pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true, 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
        style: { 
         textShadow: '0 0 3px black' 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'John', 
      data: [9, 10, 4, 7, 2] 
     }, { 
      name: 'Jane', 
      data: [8, 5, 3, 2, 1] 
     }, { 
      name: 'Joe', 
      data: [7, 7, 4, 2, 5] 
     }] 
    }); 
}); 
</script> 

</head> 

<body> 
    <h2 align="center">HighCharts.js demo</h2> 
    Where's the plot?<br> 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

</body> 
</html>

來源

2016-09-20 swchen

只是改變調用jQuery的腳本，並使其成爲highcharts之前加載。這是必要的，因爲Highcharts是建立在jquery之上的，並且沒有在highcharts源代碼之前加載它，它會導致錯誤。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>

來源

2016-09-20 02:59:51 odai

謝謝！它是多麼容易。爲什麼我需要先調用jquery然後調用highcharts？ – swchen

歡迎！ Highcharts建立在jquery之上，所以如果jquery沒有在 – odai

之前加載，那麼它會出現一些錯誤，謝謝你的迴應，這非常有幫助。 – swchen

highcharts不能在網站工作

回答

相關問題