JavaScript: Wie gebe ich jedes Mal eine Funktion zurück, wenn ich einen Wert aktualisiere?

Question

Okay, diese Frage mag etwas abstrakt erscheinen, aber lassen Sie mich das ein wenig klarer machen. Dies betrifft ein Problem, das ich versuche, es zu lösen, indem ich eine Charting-Bibliothek namens Chartist verwende. Sie haben dieses System namens Plugin, in dem Sie einige zusätzliche Funktionen in den Diagrammen hinzufügen können. Jetzt wird erklärt, wie man ein Plugin schreibt here und am Ende dieser page.
Jetzt habe ich eine plunker erstellt, um das Problem zu demonstrieren ... Das Problem, das mir gegenübersteht, ist, dass, wenn ich auf ein Dropdown klicken, ändert sich der Wert in der AchseTitel nie ...
Sie können fragen, warum?
Der Grund ist, diese Zeilen von Chartisten-plugin-axistitle.js

 (function (root, factory) { 
    if (typeof define === 'function' && define.amd) { 
    // AMD. Register as an anonymous module. 
    define([], function() { 
     return (root.returnExportsGlobal = factory()); 
    }); 
    } else if (typeof exports === 'object') { 
    // Node. Does not work with strict CommonJS, but 
    // only CommonJS-like enviroments that support module.exports, 
    // like Node. 
    module.exports = factory(); 
    } else { 
    root['Chartist.plugins.ctAxisTitle'] = factory(); 
    } 
}(this, function() { 

    /** 
    * Chartist.js plugin to display a title for 1 or 2 axises. 
    * 
    */ 
    /* global Chartist */ 
    (function (window, document, Chartist) { 
     'use strict'; 

     var axisDefaults = { 
      axisTitle: '', 
      axisClass: 'ct-axis-title', 
      offset: { 
       x: 0, 
       y: 0 
      }, 
      textAnchor: 'middle', 
      flipText: false 
     }; 
     var defaultOptions = { 
      xAxis: axisDefaults, 
      yAxis: axisDefaults 
     }; 

     Chartist.plugins = Chartist.plugins || {}; 
     Chartist.plugins.ctAxisTitle = function (options) { 

      options = Chartist.extend({}, defaultOptions, options); 

      return function ctAxisTitle(chart) { 


       chart.on('created', function (data) { 

        if (!options.axisX.axisTitle && !options.axisY.axisTitle) { 
         throw new Error('ctAxisTitle plugin - You must provide at least one axis title'); 
        } else if (!data.axisX && !data.axisY) { 
         throw new Error('ctAxisTitle plugin can only be used on charts that have at least one axis'); 
        } 

        var xPos; 
        var yPos; 
        var title; 

        //position axis X title 
        if (options.axisX.axisTitle && data.axisX) { 

         xPos = (data.axisX.axisLength/2) + data.options.axisX.offset + data.options.chartPadding.left; 

         yPos = data.options.chartPadding.top; 
         if (data.options.axisX.position === 'end') { 
          yPos += data.axisY.axisLength; 
         } 

         title = new Chartist.Svg("text"); 
         title.addClass(options.axisX.axisClass); 
         title.text(options.axisX.axisTitle); 
         title.attr({ 
          x: xPos + options.axisX.offset.x, 
          y: yPos + options.axisX.offset.y, 
          "text-anchor": options.axisX.textAnchor 
         }); 

         data.svg.append(title, true); 

        } 

        //position axis Y title 
        if (options.axisY.axisTitle && data.axisY) { 
         xPos = 0; 


         yPos = (data.axisY.axisLength/2) + data.options.chartPadding.top; 
         if (data.options.axisY.position === 'end') { 
          xPos = data.axisX.axisLength; 
         } 

         var transform = 'rotate(' + (options.axisY.flipTitle ? -90 : 90) + ', ' + xPos + ', ' + yPos + ')'; 

         title = new Chartist.Svg("text"); 
         title.addClass(options.axisY.axisClass); 
         title.text(options.axisY.axisTitle); 
         title.attr({ 
          x: xPos + options.axisY.offset.x, 
          y: yPos + options.axisY.offset.y, 
          transform: transform, 
          "text-anchor": options.axisY.textAnchor 
         }); 

         data.svg.append(title, true); 
        } 

       }); 
      chart.on('optionsChanged', function(data){ 
       console.log("Saras"); 
      }); 
      }; 
     }; 

    }(window, document, Chartist)); 
    return Chartist.plugins.ctAxisTitle; 

})); 

Wenn Sie eine console.log setzen knapp unterhalb der options = Chartist.extend({}, defaultOptions, options); Linie. Sie werden sehen, dass sich die Optionen beim Dropdown-Klick ändern ... aber sie ändern sich tatsächlich nie, abgesehen von diesem einen Mal, wenn das Diagramm erstellt wird. Nun möchte ich irgendwie die aktualisierten Optionen in der Rückkehrfunktion widerspiegeln, aber das Problem ist, dass Sie es nur einmal zurückgeben können.

Also wirklich die Frage ist Wie rufe ich die ctAxisTitle Funktion immer wieder auf Update
Das ist also ein Fehler Design? Sollte das Design des Plugins geändert werden, wenn ja ... wie ?? Oder ich kann den Code in irgendeiner Weise manipulieren, um die Funktionalität zu erreichen.

ich habe auch eine Github Repo, können sie schnell zu erhalten begonnen

Answer 1

Meiner Meinung nach ist dies ein Designfehler in angular-chartist.js. Wenn die Daten oder Optionen geändert werden sie wie folgt vor:

// If chart type changed we need to recreate whole chart, otherwise we can update 
     if (!this.chart || newConfig.chartType !== oldConfig.chartType) { 
      this.renderChart(); 
     } else { 
      this.chart.update(this.data, this.options); 
     } 

Also, wenn sie nur rerender das Diagramm, wenn der Diagrammtyp geändert wird, ist dies nicht das, was Sie wollen.

Wenn Sie diese Datei lokal haben könnten Sie einfach diesen Teil ändern, um Ihre Bedürfnisse anzupassen und immer das Diagramm zu machen, indem diese Zeilen zu ersetzen mit this.renderChart();

Siehe this plunker für ein Beispiel, wo ich die oben tat.