javascript - 移动设备上的 Chart.JS 问题(Wordpress 页面)
问题描述
我创建了一个通过元素 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>
解决方案
推荐阅读
- python - 如何修改我的代码以输出百分比和数字?
- python - 理解用浮士德表和分区连接浮士德主题
- bash - 试图将命令传递给 sftp
- reactjs - Firebase ReactJS useEffect TypeError:无法读取 null 的属性“uid”
- python - 无论如何我可以排除一些 sympy 求解器的解决方案吗?
- c - MPI 共享内存和四精度的分段错误
- python - 如何通过 POST 表单接收 Excel 文件,然后用 pandas 打开它?(Python3 aiohttp)
- c++ - 为什么不能将两个地址加在一起?
- python - 当我使用pygame.sprite.spritecollide()时,为什么只有子弹消失?
- python - Shopify API:如何向客户发送有关正在发货的产品的电子邮件?