[英]Chart.js doesn't show anything
I'm trying to periodically update a chart.我正在尝试定期更新图表。 The data is making into the dataset but I can't get it to draw the chart.
数据正在进入数据集,但我无法绘制图表。 What am I doing wrong?
我究竟做错了什么?
const ctx = document.querySelector('#apichart canvas').getContext('2d'); const apichart = new Chart(ctx, { type: 'line', data: {datasets:[{ label:'Pressure', data: [1025,1000], fill:false, borderColor: 'rgb(75, 192, 192)', tension:0.1 }]}, options: { scales: { y: { beginAtZero: true } } } }); setInterval(function run(){ apichart.data.datasets[0].data.push(1025 * Math.random()); apichart.update(); }, 10000);
#apichart{background:#777; position:absolute; top:0; right:0; bottom:0; left:0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script> <div id="apichart"> <canvas></canvas> </div>
I think this problem related to labels, so I have add labels array and update them in setInterval each time and it works.我认为这个问题与标签有关,所以我添加了标签数组并每次在 setInterval 中更新它们并且它有效。
const ctx = document.querySelector('#apichart canvas').getContext('2d'); const apichart = new Chart(ctx, { type: 'line', data: {labels: [1, 2], datasets:[{ label:'Pressure', data: [1025,1000], fill:false, borderColor: 'rgb(75, 192, 192)', tension:0.1 }]}, options: { scales: { y: { beginAtZero: true } } } }); setInterval(function run(){ apichart.data.labels.push(Math.random()); apichart.data.datasets[0].data.push(1025 * Math.random()); apichart.update(); }, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script> <div id="apichart"> <canvas></canvas> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.