javascript - 单击按钮后如何更新变量

Question

我只是不知道如何单击按钮并将不同的数据集传递给变量，以便在按下特定按钮后动态更新我的 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>

标签： javascriptjquerychart.js

Answer 1

我认为这是你需要的：

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();}

来源：更新图表