Chart.js - ボタンをクリックすると新しいデータが表示されます

Question

私は毎月の勤務時間を表示するwebappで作業しています。最初の週を表示してから、ユーザーがグラフの特定の（次の）ボタンをクリックすると、私は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; 
});