Garip Değişken modifikasyonlar: Morris.js

Question

Morris.js'de açıklayamayacağım bir şey buldum ve birisinin bu konuda yardımcı olabileceğini umuyorum.

Sorunu gösteren iki JS bilmecesi oluşturdum.

1. sorunlu sürümü: Gördüğünüz gibi

   $("#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']}); 
   

(js keman yorumların dahil), sadece chart_1 değiştirerek yapıyorum ama aynı değişim chart_2 alır!

2. bir geçici çözüm/çözüm: (js keman yorumunda) gol Array

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

Q1 başlatmak etmektir: nasıl sorun mümkün olabilir? Ben chart_2 ile temas kurmuyorum, fakat değiştirilmekte (krom geliştirici araçlarındaki nesnelerin incelenmesiyle onaylanmıştır).

S2: neden geçici çözüm çalışıyor?

Bir hata olup olmadığından emin değilim (burada bildirilmiştir - https://github.com/morrisjs/morris.js/issues/656 - ancak Morris.js artık güncellenmemiştir, SO yardım için daha iyi bir seçim gibi gözüküyor!) Veya JS'de bir şey anlamayı başaramazsam - Her iki şekilde de, bir şeyler öğrenmeyi dört gözle bekliyoruz.

Answer 1

Bu, morris.js grafik seçeneklerinizle varsayılan grafik seçeneklerini birleştirdiğinde, varsayılan grafik seçeneklerinde bulunan diziyi referans olarak tuttuğu için gerçekleşmiş gibi görünüyor. Bu yüzden bunu birkaç kez birleştirirseniz, her seferinde aynı diziye işaret eder. onlar aynı olduğundan aynı hedefler dizisi üzerinde işlem Yani, chart_1.options.goals[0] = $("#input").val(); yapıyor, chart_2 için yapıyor aynıdır

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

: En problemli kodunda

Eğer diziler karşılaştırarak test edebilirsiniz .

Bu, ayrıca geçici çözümünüzün çalıştığı da nedenidir. Her bir grafiğin ayrı bir diziye sahip olduğundan emin oluyorsunuz. Geçici çözüm kodunuzda yukarıdakiyle aynı karşılaştırmayı yaparsanız, aynı olmadıklarını görürsünüz. JSFiddle içinde yinelenmiş