在chart.js中單擊按鈕時更改數據

Question

我正在處理一些網站項目，我有圖表問題，我想更改圖表內的數據，所以當我單擊按鈕時數據值爲改變，但我堅持下去，我不知道該怎麼做。以下是與我的項目Chart.js類似的代碼示例。

var data = { 
 
    labels: ['January', 'February', 'March'], 
 
    
 
    datasets: [ 
 
     { 
 
     fillColor: "rgba(220,220,220,0.2)", 
 
     strokeColor: "rgba(220,220,220,1)", 
 
     pointColor: "rgba(220,220,220,1)", 
 
     pointStrokeColor: "#fff", 
 
     pointHighlightFill: "#fff", 
 
     pointHighlightStroke: "rgba(220,220,220,1)", 
 
     data: [30,120,90] 
 
     }, 
 
     { 
 
     fillColor: "rgba(100,220,220,0.7)", 
 
     strokeColor: "rgba(220,220,220,1)", 
 
     pointColor: "rgba(220,220,220,1)", 
 
     pointStrokeColor: "#fff", 
 
     pointHighlightFill: "#fff", 
 
     pointHighlightStroke: "rgba(220,220,220,1)", 
 
     data: [10,70,110] 
 
     } 
 
    ] 
 
    }; 
 

 
    var context = document.querySelector('#graph').getContext('2d'); 
 
    new Chart(context).Line(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 
<canvas id="graph" width="800px" height="400px"></canvas> 
 

 
<button> 
 
Option 1 
 
</button> 
 
<button> 
 
Option 2 
 
</button>

Answer 1

呼叫Chart(context).Line(New data); 按鈕點擊刷新圖表。

var data = { 
 
    labels: ['January', 'February', 'March'], 
 
    
 
    datasets: [ 
 
     { 
 
     fillColor: "rgba(220,220,220,0.2)", 
 
     strokeColor: "rgba(220,220,220,1)", 
 
     pointColor: "rgba(220,220,220,1)", 
 
     pointStrokeColor: "#fff", 
 
     pointHighlightFill: "#fff", 
 
     pointHighlightStroke: "rgba(220,220,220,1)", 
 
     data: [30,120,90] 
 
     }, 
 
     { 
 
     fillColor: "rgba(100,220,220,0.7)", 
 
     strokeColor: "rgba(220,220,220,1)", 
 
     pointColor: "rgba(220,220,220,1)", 
 
     pointStrokeColor: "#fff", 
 
     pointHighlightFill: "#fff", 
 
     pointHighlightStroke: "rgba(220,220,220,1)", 
 
     data: [10,70,110] 
 
     } 
 
    ] 
 
    }; 
 
    var data1 = { 
 
    labels: ['March', 'Apr', 'May'], 
 
    
 
    datasets: [ 
 
     { 
 
     fillColor: "rgba(220,220,220,0.2)", 
 
     strokeColor: "rgba(220,220,220,1)", 
 
     pointColor: "rgba(220,220,220,1)", 
 
     pointStrokeColor: "#fff", 
 
     pointHighlightFill: "#fff", 
 
     pointHighlightStroke: "rgba(220,220,220,1)", 
 
     data: [50,100,140] 
 
     }, 
 
     { 
 
     fillColor: "rgba(100,220,220,0.7)", 
 
     strokeColor: "rgba(220,220,220,1)", 
 
     pointColor: "rgba(220,220,220,1)", 
 
     pointStrokeColor: "#fff", 
 
     pointHighlightFill: "#fff", 
 
     pointHighlightStroke: "rgba(220,220,220,1)", 
 
     data: [40,70,200] 
 
     } 
 
    ] 
 
    }; 
 

 
    var context = document.querySelector('#graph').getContext('2d'); 
 
    new Chart(context).Line(data); 
 
    
 
$("#btn1").on("click", function() { 
 
    var context1 = document.querySelector('#graph').getContext('2d'); 
 
    new Chart(context1).Line(data); 
 
    }); 
 
$("#btn2").on("click", function() { 
 
    var context2 = document.querySelector('#graph').getContext('2d'); 
 
    new Chart(context2).Line(data1); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 
<canvas id="graph" width="800px" height="400px"></canvas> 
 

 
<button id="btn1"> 
 
Option 1 
 
</button> 
 
<button id="btn2"> 
 
Option 2 
 
</button>