Seltsame Variablenänderungen in Morris.js

Question

Ich habe etwas in Morris.js gefunden, das ich nicht erklären kann und hoffe, dass jemand hier helfen könnte.

Ich habe zwei JS fiddles erstellt, die das Problem veranschaulichen.

1. Die problematische Version: (js Geige in den Kommentaren enthalten)

   $("#input").change(function() { 
       chart_1.options.goals[0] = $("#input").val(); 
       chart_1.redraw(); 
       chart_2.redraw(); 
   }); 
   
   chart_1 = new Morris.Bar({ 
       element: 'chart_1', 
       barColors: ["black"], 
       goalLineColors: ["blue"], 
       data: [ 
        {year: "2008", value: 5}, 
        {year: "2009", value: 10}, 
        {year: "2010", value: 15}, 
        {year: "2011", value: 20}, 
        {year: "2012", value: 25}, 
       ], 
       xkey: 'year', 
       ykeys: ['value'], 
       labels: ['value']}); 
   
   chart_2 = new Morris.Bar({ 
       element: 'chart_2', 
       barColors: ["blue"], 
       goalLineColors: ["red"], 
       data: [ 
        {year: "2008", value: 25}, 
        {year: "2009", value: 20}, 
        {year: "2010", value: 15}, 
        {year: "2011", value: 10}, 
        {year: "2012", value: 5}, 
       ], 
       xkey: 'year', 
       ykeys: ['value'], 
       labels: ['value']}); 
   

Wie Sie sehen können, bin ich nur zu modifizieren chart_1, aber chart_2 erhält die gleiche Änderung!

2. eine Problemumgehung/Lösung: (js Geige in Kommentaren) ist die Ziele Array

   chart_1 = new Morris.Bar({ 
       element: 'chart_1', 
       barColors: ["black"], 
       goals: [], 
   

Q1 initialisiert werden: Wie ist das Problem überhaupt möglich? Ich berühre chart_2 nicht, aber es wird geändert (bestätigt durch Untersuchung der Objekte in den Chrome-Entwicklertools).

Q2: Warum funktioniert die Problemumgehung?

Ich bin mir nicht sicher, ob es ein Fehler ist (hier gemeldet - https://github.com/morrisjs/morris.js/issues/656 - aber gegeben Morris.js wird nicht mehr aktualisiert, so scheint eine bessere Wette um Hilfe zu sein!) - So oder so, ich freue mich darauf, etwas zu lernen.

Answer 1

Dies scheint zu geschehen, denn wenn morris.js die Standard-Diagrammoptionen mit den Diagrammoptionen zusammenführt, behält sie den Verweis auf das Array, das in den Standard-Diagrammoptionen enthalten ist. Wenn Sie also mehrere Male zusammenführen, wird jedes Mal auf das gleiche Array verwiesen.

In problematischen Code können Sie dies testen, indem die Arrays zu vergleichen:

console.log(chart_1.options.goals === chart_2.options.goals); // logs true 

So, da sie die gleichen sind, tun chart_1.options.goals[0] = $("#input").val(); ist das gleiche, wie es für chart_2 tun, wie sie auf der gleichen Ziele Array arbeiten .

Dies ist auch der Grund, warum Ihre Problemumgehung funktioniert. Sie stellen sicher, dass jedes Diagramm ein eigenes Array aufweist. Wenn Sie den gleichen Vergleich wie oben in Ihrem Problemumgehungscode durchführen, werden Sie feststellen, dass sie nicht identisch sind.