我正在尝试在 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';
});
现在我的弹出窗口是空白的，没有图表，测试元素没有内容。而且，没有控制台输出(没有错误)。
我该如何解决这个问题？
最佳答案
我认为您有一些语法错误，请尝试以下代码:
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>
list :
{
"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 是一样的...
我测试了它，它在我的弹出窗口中显示了图表
祝你好运。
关于javascript - 在chrome扩展的弹出窗口中显示一些chart.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43752362/