Aktualisieren eines Diagramms in chart.JS mithilfe einer Dropdown-Schaltfläche

Question

Ich verwende chart.Js zum Rendern von Diagrammen in einer Anwendung. Was ich suche, ist, dem Benutzer zu geben, in der Lage zu sein, zwei Dataset mit einem Dropdown-Button zu vergleichen.

Ich habe versucht, etwas zu bearbeiten, das ich gefunden habe, aber ich kann es schaffen. Ich habe versucht, diesen Code:

document.getElementById('test').addEventListener('click', function() { 
     var newDataset = { 
     label: 'Dataset ' + config.data.datasets.length, 
     backgroundColor: "black", 
     borderColor: "black", 
     data: [], 
     fill: false 
     }; 
     for (var index = 0; index < config.data.labels.length; ++index) { 
     newDataset.data.push(randomScalingFactor()); 
     } 
     config.data.datasets.push(newDataset); 
     window.myLine.update(); 
    }); 

ich einen JSfiddle mit all den Code erstellt Ihnen einen Überblick zu geben: https://jsfiddle.net/ben2pop/219hry2s/36/

Answer 1

Sie müssen die ID test auf das Auswahlfeld platzieren und nicht die Option. ändern

document.getElementById('test').addEventListener('click', function() { 

Um

document.getElementById('test').addEventListener('change', function(e) { 

jetzt können Sie den Wert der Änderung Zugriff durch e.target.val und entscheiden, welche Daten Sie einfügen möchten/entfernen basierend auf der Interaktion mit dem Benutzer.