在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>