Zeichnen Sie den alten Donut neu und erstellen Sie einen neuen, indem Sie auf jede Farbe klicken. Chart.js

Question

Ich bin neu in der Programmierung, tut mir leid, wenn die Frage albern ist. Ich mache einige Grafiken mit chart.js.

Ich habe es geschafft, einen Donut in einem anderen mit dem onclick -Ereignis zu erstellen, das Problem, das ich habe ist, dass es für jeden Klick einen erzeugt und ich brauche es nur einmal zu tun. Bei jedem Klick in einem anderen Bereich der Grafik erzeugt ein Donut einen Donut.

Zum Beispiel:

Wenn Sie auf die rote Farbe klicken, die eine rote und graue Donut erzeugt.

Wenn Sie auf grünen Teil klicken, um einen grünen und grauen usw. mit allen von ihnen zu generieren.

Ich würde die Hilfe sehr schätzen.

var ctx = document.getElementById('canvasDoughnut').getContext('2d'); 
 
var backgroundColors = [ 
 
    '#fd3f4a', 
 
    '#484848', 
 
    '#705bc9', 
 
    '#008ee5', 
 
    '#00c9d8', 
 
    '#5cc600', 
 
    '#ffd939', 
 
    '#ff8f00' 
 

 
]; 
 

 
var newColors = ['#5cc600', '#ebe9e1']; 
 

 
var newData = [48, 52]; 
 

 
var varData = [25, 18, 18, 18, 8, 48, 18, 12]; 
 

 
var chart = new Chart(ctx, { 
 
    type: 'doughnut', 
 

 
    data: { 
 
    datasets: [{ 
 

 
     backgroundColor: backgroundColors, 
 
     data: varData 
 
    }] 
 
    }, 
 

 
    options: { 
 
    cutoutPercentage: 70, 
 
    rotation: Math.PI * -0.7, 
 

 
    onClick: function(evt, elements) { 
 

 
     var datasetIndex; 
 
     var dataset; 
 

 
     if (elements.length) { 
 
     var index = elements[0]._index; 
 
     datasetIndex = elements[0]._datasetIndex; 
 

 
     // Reset old state 
 
     dataset = chart.data.datasets[datasetIndex]; 
 
     dataset.backgroundColor = ['#5cc600', '#ebe9e1']; 
 
     dataset.value = [58, 42], 
 
      dataset.data = [58, 42] 
 

 
     } 
 
     // config. new data doughnut 
 

 
     chart.config.data.datasets.push({ 
 
      backgroundColor: [ 
 
      '#5cc600', 
 
      '#ebe9e1' 
 
      ], 
 
      dataPoints: [48, 52], 
 
      data: [48, 52], 
 
     }), 
 
     chart.update(); 
 
    } 
 

 
    }, 
 

 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 
<canvas id="canvasDoughnut" class="size-doughnut"></canvas>

Answer 1

Sie brauchen nur einen Scheck zu tun, bevor Sie einen neuen Datensatz schieben sicher, dass Sie nicht bereits 2 Datensätze tun zu machen.

var ctx = document.getElementById('canvasDoughnut').getContext('2d'); 
 
var backgroundColors = [ 
 
    '#fd3f4a', 
 
    '#484848', 
 
    '#705bc9', 
 
    '#008ee5', 
 
    '#00c9d8', 
 
    '#5cc600', 
 
    '#ffd939', 
 
    '#ff8f00' 
 

 
]; 
 

 
var newColors = ['#5cc600', '#ebe9e1']; 
 

 
var newData = [48, 52]; 
 

 
var varData = [25, 18, 18, 18, 8, 48, 18, 12]; 
 

 
var chart = new Chart(ctx, { 
 
    type: 'doughnut', 
 

 
    data: { 
 
    datasets: [{ 
 

 
     backgroundColor: backgroundColors, 
 
     data: varData 
 
    }] 
 
    }, 
 

 
    options: { 
 
    cutoutPercentage: 70, 
 
    rotation: Math.PI * -0.7, 
 

 
    onClick: function(evt, elements) { 
 

 
     var datasetIndex; 
 
     var dataset; 
 

 
     if (elements.length) { 
 
     var index = elements[0]._index; 
 
     datasetIndex = elements[0]._datasetIndex; 
 

 
     // Reset old state 
 
     dataset = chart.data.datasets[datasetIndex]; 
 
     dataset.backgroundColor = ['#5cc600', '#ebe9e1']; 
 
     dataset.value = [58, 42], 
 
      dataset.data = [58, 42] 
 

 
     } 
 
     // config. new data doughnut 
 

 
     // check to make sure we haven't already pushed a dataset 
 
     if (chart.config.data.datasets.length < 2) { 
 
     chart.config.data.datasets.push({ 
 
      backgroundColor: [ 
 
      '#5cc600', 
 
      '#ebe9e1' 
 
      ], 
 
      dataPoints: [48, 52], 
 
      data: [48, 52], 
 
     }), 
 
     chart.update(); 
 
     } 
 
    } 
 
    }, 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 
<canvas id="canvasDoughnut" class="size-doughnut"></canvas>