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不能在网站工作

回答

相关问题