基本的Javascript：我如何鏈接我的HTML和Javascript在Highcharts例子？

對於基本問題，我很遺憾，但我搜索了一下，我無法完成簡單的任務。基本的Javascript：我如何鏈接我的HTML和Javascript在Highcharts例子？

我想要實現Highcharts（http://www.highcharts.com/demo/pie-gradient）的餅圖梯度例子，所以我的JavaScript複製到piechart_gradient.js：

$(function() { 

     // Radialize the colors 
     Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { 
      return { 
       radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 }, 
       stops: [ 
        [0, color], 
        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken 
       ] 
      }; 
     }); 

     // Build the chart 
     $('#container').highcharts({ 
      chart: { 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false 
      }, 
      title: { 
       text: 'Browser market shares at a specific website, 2010' 
      }, 
      tooltip: { 
       pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: true, 
         color: '#000000', 
         connectorColor: '#000000', 
         formatter: function() { 
          return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; 
         } 
        } 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Browser share', 
       data: [ 
        ['Firefox', 45.0], 
        ['IE',  26.8], 
        { 
         name: 'Chrome', 
         y: 12.8, 
         sliced: true, 
         selected: true 
        }, 
        ['Safari', 8.5], 
        ['Opera',  6.2], 
        ['Others', 0.7] 
       ] 
      }] 
     }); 
    });

然後我把給定的HTML線到我的web服務器的index.php，隨着一個額外的線，包括當地的javascript：

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<script type="text/javascript" src="piechart_gradient.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

而我只是得到一個空白頁。localhost不應該有一個餅圖嗎？

編輯：新的HTML index.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<script type="text/javascript" src="piechart.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
</html>

相同的結果仍然，混得localhost

來源

2014-01-21 Dimitris Sfounis

爲了幫助您進行調試，您可以查看頁面的源代碼，以驗證您的問題中的html實際上是否正在提交，並且還啓動了一個JavaScript控制檯以獲取有關什麼（如果有的話）出錯的更多信息。（每個瀏覽器都應該附帶這兩個工具） – Philipp

檢查是否下載了js，可能存在js不能通過服務器下載的實例。 – nandu

你缺少引用一個空白頁jquery

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

看看這個DEMO

AH HAAAAA

我知道你是後Highcharts權做

複製和過去的jquery參考？您需要的jquery頂部

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script>

來源

2014-01-21 19:32:43

擊敗我16秒！ – wergeld

同樣的結果，仍然是空白頁。請檢查我上面編輯的問題。 –

@DimitrisSfounis查看更新 –

你缺少的jQuery的參考。你也應該包括這一點。編輯：你需要在highcharts之前包括jQuery。

來源

2014-01-21 19:32:59 wergeld

相同的結果，包括:( –

基本的Javascript：我如何鏈接我的HTML和Javascript在Highcharts例子？

回答

相關問題