chart.jsのボタンをクリックするとデータを変更する

Question

私はいくつかのウェブサイトプロジェクトで作業しています。charts.jsに問題があります。チャート内のデータを変更したいので、データ値をクリックします。変更するが、私はそれに固執している、私はそれを行う方法がわからない。以下は、私のプロジェクト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>