gpt4 book ai didi

javascript - 在chrome扩展的弹出窗口中显示一些chart.js

转载 作者:行者123 更新时间:2023-12-03 04:25:35 25 4
gpt4 key购买 nike

我正在尝试在 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com