代码之家  ›  专栏  ›  技术社区  ›  Saras Arya

JavaScript:如何在每次更新值时返回函数?

  •  1
  • Saras Arya  · 技术社区  · 8 年前

    好吧,这个问题可能看起来有点抽象,但让我更清楚一点。这是关于一个问题,我正在尝试使用一个名为Chartist的图表库来解决它。他们有一个叫做插件的系统,你可以在图表上添加一些额外的功能。现在解释如何编写插件 here 在这个底部 page .
    现在我创建了一个 plunker 我面临的问题是,每当我单击下拉菜单时,axisTitle中的值永远不会改变。。。
    你可能会问为什么?
    原因是这些chartist-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;
    
    }));
    

    如果你安装一个控制台。日志正好位于 options = Chartist.extend({}, defaultOptions, options); 线单击下拉菜单时,您将看到选项发生变化……但实际上,除了图表创建时的这一次,它们从未发生变化。 现在我想让更新后的选项反映在return函数中,但问题是你只能返回一次。

    所以问题是 如何调用 ctAxisTitle 更新时一次又一次地运行
    这是设计缺陷吗?插件的设计是否应该改变,如果是…如何??或者我可以以某种方式操作代码来实现功能。

    我还创建了一个 Github 回购,让您快速开始

    1 回复  |  直到 8 年前
        1
  •  2
  •   Sonaryr    8 年前

    在我看来,这是一个设计缺陷 angular-chartist.js 。如果更改了数据或选项,则会执行以下操作:

    // 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);
            }
    

    因此,当他们只在图表类型更改时重新呈现图表时,这不是你想要的。

    如果您在本地拥有此文件,则只需修改该部分以满足您的需要,并始终通过将此行替换为 this.renderChart();

    看见 this plunker 例如,我做了上面的工作。