2014-04-02 84 views
2

我使用Highcharts Bubble作爲其官方網站的示例,並嘗試使用Framework CodeIgniter對其進行修改。 我在GoogleChrome和Firefox中運行它,但沒有顯示任何內容。 這裏是代碼highcharts氣泡將不會加載

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>STATISTIK</title> 

</head> 

<link href="http://10.16.107.77/statistik/public/css/main.css" rel="stylesheet"> 

<script src="http://10.16.107.77/statistik/public/jquery/jquery-ui-1.10.3/js/jquery-1.9.1.js"></script> 
<script src="http://10.16.107.77/statistik/public/jquery/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script> 
<script src="http://10.16.107.77/statistik/public/jquery/jquery.validate.js"></script> 

<style> 
#content { 
    position: relative; 
} 
#content img { 
    position: absolute; 
    top: 0px; 
    right: 10px; 
} 
</style> 
<body> 
<div id="content"> 
</div> 
<!--link rel="stylesheet" type="text/css" href="http://10.16.107.77/statistik/public/css/CreativeCSS3AnimationMenus/css/demo.css" /--> 
<script src="http://10.16.107.77/statistik/public/jquery/highcharts.js"></script> 
<script src="http://10.16.107.77/statistik/public/jquery/highcharts-more.js"></script> 
<script src="http://10.16.107.77/statistik/public/jquery/exporting.js"></script> 
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div> 
<script> 
$(function() { 
    $('#container').highcharts({ 

     chart: { 
      type: 'bubble', 
      zoomType: 'xy' 
     }, 

     title: { 
      text: 'Formasi Tenaga Kerja' 
     }, 
     series: [{ 
      data: [[97,36,1000]], 
      name: 'Area Medan' 
     }, { 
      data: [[25,10,1000]], 
      name: 'Area Lubuk Pakam' 
     }, { 
      data: [[47,47,1000]], 
      name: 'Area Binjai' 
     }, { 
      data: [[75,80,1000]], 
      name: 'Area Sibolga' 
     }, { 
      data: [[60,25,1000]], 
      name: 'Area Rantau Prapat' 
     }, { 
      data: [[100,80,1000]], 
      name: 'Area Padang Sidempuan' 
     }, { 
      data: [[80,55,1000]], 
      name: 'Area Nias' 
     }, { 
      data: [[75,80,1000]], 
      name: 'Area Pematang Siantar' 
     }] 

    }); 

}); 
</script></body> 
</html> 

每個回覆的問題。 關於

+0

是你能夠看到開發者工具控制檯任何錯誤? – anurupr

+1

你可以創建一個顯示錯誤的JSFiddle示例嗎? –

+1

也許它只是我,但我不明白PHP和CodeIgniter是如何相關的。我沒有在提供的代碼中看到任何跟蹤。 – gpgekko

回答

4

嘗試導入highcharts-more.js文件。 看在工作實例這裏: DEMO

代碼: HTML:

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/highcharts-more.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div> 
+0

我已經從作爲上述代碼複製到我的服務器中的文件導入了該腳本。我不認爲這是主要問題。 Thnx回覆 – stsho89

+0

請檢查演示並相應地更改 –

+0

Thnx。我試過你的解決方案,它的工作原理。但接下來的問題是我不能將腳本複製到我的服務器並在本地嘗試。爲什麼必須從官方網站加載? – stsho89