我在使用 Chart.js 時(shí)遇到了一些問題。我正在制作一個(gè)投票系統(tǒng),我想動(dòng)態(tài)更新該系統(tǒng)以供用戶查看。有點(diǎn)像strawpoll 網(wǎng)站。當(dāng)用戶提交投票時(shí),結(jié)果頁面將自動(dòng)更新為新的票數(shù)。我一直在尋找這個(gè)問題的答案,我覺得我已經(jīng)成功了一半。我可以更新實(shí)際的圖表,但它只是復(fù)制數(shù)據(jù)并永遠(yuǎn)持續(xù)下去。我希望它“替換”或只是更新數(shù)字和/或查看新的投票問題。每秒復(fù)制一次的圖表圖片這是我正在運(yùn)行的代碼:<div id="chart-container"> <canvas id="dataChart"></canvas></div><script> var ctx = $("#dataChart"); var dataChart = new Chart(ctx, { type: 'bar', data: { labels: [], datasets: [{ label: '<?php echo($row['vote_name']) ?>', backgroundColor: '#49e2ff', borderColor: '#46d5f1', hoverBackgroundColor: '#CCCCCC', hoverBorderColor: '#666666', data: [], }] }, options: {} }); var updateChart = function() { $('#dataChart').html(''); $('#dataChart').html('<canvas id="dataChart"></canvas>'); $.ajax({ url: "data.php?form=<?php echo($vote_id) ?>", type: "GET", dataType: "json", success: function(data) { console.log(data); var name = []; var marks = []; for (var i in data) { dataChart.data.labels.push(data[i].question); dataChart.data.datasets[0].data.push(data[i].vote_count); } dataChart.update(); }, error: function(data) { console.log(data); } }); } updateChart(); setInterval(() => { updateChart(); }, 1000);</script>問題是:這不起作用有什么原因嗎?無論我如何嘗試,我似乎都無法做到正確。任何幫助,將不勝感激!
1 回答

守著一只汪
TA貢獻(xiàn)1872條經(jīng)驗(yàn) 獲得超4個(gè)贊
該success
功能可以更改如下:
success:?function(data)?{ ??dataChart.data.labels?=?data.map(v?=>?v.question); ??dataChart.data.datasets[0].data?=?data.map(v?=>?v.vote_count); ??dataChart.update(); },
該解決方案使用的
Array.map()
方法創(chuàng)建一個(gè)新的array
,并填充在array
.
- 1 回答
- 0 關(guān)注
- 207 瀏覽
添加回答
舉報(bào)
0/150
提交
取消