我只是想不通如何单击按钮并将不同的数据集传递给变量,以便在按下特定按钮后动态更新我的 Chart.js 图表。我来自python,最近才开始学习js,这样的代码通常在python 中工作。请看我的代码
<div id="parentElementID">
<button type="button" id="1">Button1</button>
<button type="button" id="2">Button2</button>
<button type="button" id="3">Button3</button>
</div>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script type="text/javascript">
var spins15 = [1, 1, 1]
//These should update the value of a variable on click. But apparently they don't
$(document).ready(function(){
$('#1').click(function(){
spins15=[15, 25, 35];
});
});
$(document).ready(function(){
$('#2').click(function(){
spins15=[25, 31, 24];
});
});
$(document).ready(function(){
$('#3').click(function(){
spins15=[50, 11, 25];
});
});
//Chart.js part
let myChart = document.getElementById('myChart').getContext('2d');
var options = {
responsive: true,
maintainAspectRatio: true,
};
let someChart = new Chart(myChart, {
type:'bar',
data:{
labels:['0', '32', '15'],
datasets:[{
label:'Some chart',
//This variable below should be updated in order to update the barchart
data:spins15
}]
},
options:options
});
//
</script>
最佳答案
我想这就是你需要的:
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();}
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.update();}
关于javascript - 单击按钮后如何更新变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54381991/