Chart.js - 按钮点击

Question

我正在开发一个每月显示每日工作时间的网络应用程序，我想显示第一周，然后当用户点击特定（下一个）按钮时，图表将删除/清除第一周的数据并填充它与下周的数据等等......

图片来解释我的意思

注意：我正在使用http://www.chartjs.org

更新

我的代码

HTML代码

<canvas id="work-time1" height="180"></canvas>
<button type="button"id="btn-next">Next</button>

JS代码

    var workedHoursData = [5, 3, 5, 7, 2, 6, 3, 5, 6, 5, 3, 6, 5, 3, 7, 3, 4, 5, 4, 6, 3, 5, 3, 5, 7, 2];
    var week = [];
    var chart = new Chart(document.getElementById('work-time1').getContext('2d'), {
        type: 'bar',
        data: {
            labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            datasets: [{
                label: "Worked hours",
                backgroundColor: '#4da2ff',
                borderColor: 'transparent',
                scaleOverride:true,
                scaleSteps:9,
                scaleStartValue:0,
                scaleStepWidth:100,
                data: week
            }]
        },
        options: {
            scales: {
                yAxes: [{
                  min: 0,
        max: 13,
        stepSize: 1,
                    ticks: {
                        beginAtZero:true,
                    }
                }]
            }
        }

    });
var counter = 6;
$('#btn-next').click(function () {
  week = workedHoursData.splice(0, counter);
  counter += counter;
})

Answer 1

您必须直接在图表对象中更改数据，然后调用此对象的更新方法：

$('#btn-next').click(function () {
  chart.data.datasets[0].data = workedHoursData.splice(0, counter);
  chart.update();
  counter += counter;
});