我创建了一个按元素 id 获取某些数字的图表,当在 wordpress 页面中使用代码时,它在台式机上运行良好,但图表在移动设备上不显示
当我从 HTML 文件本地测试它时,它在移动和桌面上都很好,我猜这是我使用的代码和 wordpress 之间的兼容性问题
这是我使用的代码
<p id="rollthedice">
20
</p>
<canvas id="myChart" style="position: relative; height:60vh; width:90vw"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script type="text/javascript">
var numDice = parseInt(document.getElementById("rollthedice").textContent);
</script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
Chart.defaults.global.defaultFontSize = 24;
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['dice 1', 'dice 2', 'dice 3', 'dice 4'],
datasets: [{
label: 'result',
data: [numDice, 90, 70, 100, 50, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 10
}
}]
}
}
});
</script>