2017-05-03 135 views
0

我想在我的Chrome擴展的彈出窗口中顯示來自chart.js的一些動態圖表。在Chrome擴展的彈出窗口中顯示一些chart.js

這是我最小的HTML文件:

<html> 
    <head> 
    </head> 

    <body> 
     <div class="container"> 
      <div> 
       <canvas id="chart"></canvas> 
      </div> 
     </div> 
     <p id='test'></p> 
     <script type='text/javascript' src='chart.js'> 
     <script type='text/javascript' src='popup.js'> 
     </script> 
    </body> 
</html> 

而且我很小的腳本,添加數據到圖表:

document.addEventListener('DOMContentLoaded', function() 
{ 
    var ctx = document.getElementById("chart").getContext('2d'); 
    var myChart = new Chart(ctx, { 
     type: 'doughnut', 
     data: { 
      labels: [ 'a', 'b', 'c', 'd' ], 
       datasets: [{ 
       backgroundColor: [ 
        "#59be5b", 
        "#d56328", 
        "#ff1b2d", 
        "#0078d7" 
       ], 
       data: [ 1, 2, 3, 4 ] 
      }] 
     } 
    }); 

    document.getElementById('test').textContent = 'SUCCEED'; 
}); 

現在我的彈出窗口的空白,也沒有圖表和測試元素沒有內容。而且,沒有控制檯輸出(沒有錯誤)。

我該如何解決這個問題?

回答

1

我覺得你有一些了Syntex錯誤,請嘗試以下代碼:

popup.html

<html> 
<head>  
    <script type='text/javascript' src='chart.js'></script> 
    <script type='text/javascript' src='popup.js'></script> 
</head> 
<body> 
    <div class="container"> 
     <div> 
      <canvas id="chart"></canvas> 
     </div> 
    </div> 
    <p id='test'></p> 
</body> 

清單:

{ 
    "manifest_version": 2, 
    "minimum_chrome_version": "23", 
    "name": "test!", 
    "description": "test", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html", 
    "default_title": "Click here!" 
    }, 
"permissions": [], 
"background": { } 
} 

popup.js是一樣的...

我測試它,它顯示在我彈出的圖表

祝你好運。

+0

哦對。我忘了腳本的結束標記。這有點令人困惑,因爲控制檯中沒有錯誤。我不知道HMTL錯誤沒有在其中顯示。謝謝。 – Nucktrooper

相關問題