我将这三个元素（CSS，JavaScript，HTML）组合在一起放入我的Wix网站，但是该网站不起作用。有谁知道它为什么不起作用，因为在demo中它可以正常工作。问题是，在网站上它仅显示“ 89％”，并且没有显示饼图。该代码存储在HTML iframe中。
<head>
<style type="text/css">
.outer {
position: relative;
width: 600px;
height: 400px;
}
canvas {
position: absolute;
}
.percent {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
font-size: 80px;
bottom: 0;
}
</style>
</head>
<body>
<div class="outer">
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<canvas id="secondContainer" width="600" height="400"></canvas>
<p class="percent">
89%
</p>
</div>
<script>
var options1 = {
type: 'doughnut',
data: {
labels: ["Red", "Orange", "Green"],
datasets: [{
label: '# of Votes',
data: [33, 33, 33],
backgroundColor: [
'rgba(231, 76, 60, 1)',
'rgba(255, 164, 46, 1)',
'rgba(46, 204, 113, 1)'
],
borderColor: [
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)'
],
borderWidth: 5
}]
},
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltip: {
enabled: false
},
cutoutPercentage: 95
}
}
var ctx1 = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx1, options1);
var options2 = {
type: 'doughnut',
data: {
labels: ["", "Purple", ""],
datasets: [{
data: [88.5, 1, 10.5],
backgroundColor: [
"rgba(0,0,0,0)",
"rgba(255,255,255,1)",
"rgba(0,0,0,0)",
],
borderColor: [
'rgba(0, 0, 0 ,0)',
'rgba(46, 204, 113, 1)',
'rgba(0, 0, 0 ,0)'
],
borderWidth: 3
}]
},
options: {
cutoutPercentage: 95,
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltips: {
enabled: false
}
}
}
var ctx2 = document.getElementById('secondContainer').getContext('2d');
new Chart(ctx2, options2);
</script>
</body>
我怀疑您只需要加载ChartJS库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
</head>
或：
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
</body>