Anwenden/Registrieren von in Konflikt stehenden Plugins in verschiedenen Diagrammen

Question

Ich habe zwei etwas andere Chart.js Plugins definiert und ich habe eine Seite mit zwei verschiedenen Diagrammen. Ich möchte das erste Plugin auf das erste Diagramm und das zweite auf das zweite Diagramm anwenden.

Entsprechend der source gibt es eine Register- und Entregistrierungsfunktion für Plugins, aber Sie registrieren sie zu einer globalen Variable 'Chart.plugins'.

Ich habe eine Lösung wie diese versucht:

Chart.plugins.register(plugin1); 
window.myBar = new Chart(...); 
Chart.plugins.unregister(plugin1); 

Chart.plugins.register(plugin2); 
window.myBar2 = new Chart(...); 
Chart.plugins.unregister(plugin2); 

aber es scheint, diese beiden Plugins hebt die Registrierung, bevor etwas passiert. Und wenn ich die Plugins nicht abmelden will, überschreibt das zweite Plug-in alles, was das erste Plugin tut.

Außerdem scheint es nicht möglich, ein Plugin direkt zu einem bestimmten Diagramm zu registrieren, da zum Beispiel 'windows.myBar.plugins' nicht definiert ist.

Weiß jemand, ob es eine andere Lösung gibt?

Edit1: Ich dachte über eine mögliche Problemumgehung nach, indem ich die verschiedenen Verhaltensweisen der Plugins als Optionen der einzelnen Diagramme spezifiziere und dann ein einzelnes Plugin definiere, das auf den spezifischen Optionen eines Diagramms basiert. Aber ich würde immer noch gerne wissen, ob es eine Möglichkeit gibt, Plugins auf ein bestimmtes Diagramm anzuwenden.

Answer 1

Ich denke, eine Lösung besteht darin, eine spezifische Eigenschaft in den Diagrammoptionen für jedes Plugin zuzuweisen. Jedes Diagramm füllt ein anderes Attribut, um jedes Plugin zu verwenden. In Ihrem Fall haben Sie plugin1 und plugin2.

Dann werden Sie in jeder Definition nach verschiedenen Attributen suchen, um zu sehen, ob das Diagramm dieses Plugin verwendet oder nicht. Zum Beispiel werden Ihre Definitionen so etwas wie:

Chart.pluginService.register({ 
    afterDraw: function(chart) { 
    if (chart.config.options.plugin_one_attribute) { 
     // Plugin code here... 
    } 
    } 
}); 

dieses Plugin nutzen zu können, wird Ihr Diagramm, das den plugin_one_attribute zu füllen, in den Optionen. Wie folgt aus:

optionsUsingPlugin1 = { 
    plugin_one_attribute: // Your variable to be used in the plugin goes here! 
    responsive: true,  
    maintainAspectRatio: true, 
    title: { 
    display: true 
    } 
    // And any other config options you are already using 
} 

Und diese verwenden, wenn Ihr Diagramm erstellen:

var myBar = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: optionsUsingPlugin1 
}); 

Also, um plugin2 zu verwenden, Ihr myBar2 Diagramm benötigen ein bestimmtes Attribut für plugin2 (die für sie überprüfen, wenn Registrieren). Auf diese Weise können Sie steuern, welche Plugins in jedem Diagramm aktiv sind.

Hoffe, dass hilft!