Question

我正在使用以下flot chart指令：

/**=========================================================
 * Module: flot.js
 * Initializes the Flot chart plugin and handles data refresh
 =========================================================*/

(function() {
    'use strict';

    angular
        .module('app.charts')
        .directive('flot', flot);

    flot.$inject = ['$http', '$timeout'];
    function flot ($http, $timeout) {

        var directive = {
          restrict: 'EA',
          template: '<div></div>',
          scope: {
            dataset: '=?',
            options: '=',
            series: '=',
            callback: '=',
            src: '='
          },
          link: link
        };
        return directive;

        function link(scope, element, attrs) {
          var height, plot, plotArea, width;
          var heightDefault = 220;

          plot = null;

          width = attrs.width || '100%';
          height = attrs.height || heightDefault;

          plotArea = $(element.children()[0]);
          plotArea.css({
            width: width,
            height: height
          });

          function init() {
            var plotObj;
            if(!scope.dataset || !scope.options) return;
            plotObj = $.plot(plotArea, scope.dataset, scope.options);
            scope.$emit('plotReady', plotObj);
            if (scope.callback) {
              scope.callback(plotObj, scope);
            }

            return plotObj;
          }

          function onDatasetChanged(dataset) {
            if (plot) {
              plot.setData(dataset);
              plot.setupGrid();
              return plot.draw();
            } else {
              plot = init();
              onSerieToggled(scope.series);
              return plot;
            }
          }
          scope.$watchCollection('dataset', onDatasetChanged, true);

          function onSerieToggled (series) {
            if( !plot || !series ) return;
            var someData = plot.getData();
            for(var sName in series) {
              angular.forEach(series[sName], toggleFor(sName));
            }

            plot.setData(someData);
            plot.draw();

            function toggleFor(sName) {
              return function (s, i){
                if(someData[i] && someData[i][sName])
                  someData[i][sName].show = s;
              };
            }
          }
          scope.$watch('series', onSerieToggled, true);

          function onSrcChanged(src) {

            if( src ) {

              $http.get(src)
                .success(function (data) {

                  $timeout(function(){
                    scope.dataset = data;
                  });

              }).error(function(){
                $.error('Flot chart: Bad request.');
              });

            }
          }
          scope.$watch('src', onSrcChanged);

        }
    }


})();

设置数据后，它可以正常工作。但是如果数据发生了变化，那么它应该是一个新的点，它应该被放在开头，最后会被绘制出来。因此，终点和起点连接起来。

例如。
以前的数据：B-C-D-E-F
按钮单击
新数据：A-B-C-D-E-F
图表：B-C-D-E-F-A（也是，B和A连接）

如果刷新页面，则会正确绘制所有内容。所以数据和选项是正确的。我不知道如何重置它，因为我看到的所有代码都是canvas，占位符和$.plot()。

这是我的数据：
的旧

[{"label":"temp","data":[["2016-04-01T09:19:31.750Z","25"],["2016-04-01T09:19:31.956Z","25"],["2016-04-01T09:19:32.150Z","25"],["2016-04-01T09:19:32.326Z","25"],["2016-04-01T09:19:32.664Z","25"],["2016-04-01T09:19:32.844Z","25"],["2016-04-01T09:19:33.034Z","25"],["2016-04-01T09:19:33.225Z","25"],["2016-04-01T09:19:33.414Z","25"],["2016-04-01T09:19:33.571Z","25"],["2016-04-01T09:19:33.748Z","25"]]}]

新

[{"label":"temp","data":[["2016-03-28T09:19:31.062Z","20"],["2016-04-01T09:19:31.750Z","25"],["2016-04-01T09:19:31.956Z","25"],["2016-04-01T09:19:32.150Z","25"],["2016-04-01T09:19:32.326Z","25"],["2016-04-01T09:19:32.664Z","25"],["2016-04-01T09:19:32.844Z","25"],["2016-04-01T09:19:33.034Z","25"],["2016-04-01T09:19:33.225Z","25"],["2016-04-01T09:19:33.414Z","25"],["2016-04-01T09:19:33.571Z","25"],["2016-04-01T09:19:33.748Z","25"]]}]

Answer 1

我正在使用变通方法，在指令的范围中添加了reset键。按下按钮时我将其更改为true，然后在更改数据时再次调用init()。

如果有更好的选择，请建议。

var directive = {
    restrict: 'EA',
    template: '<div></div>',
    scope: {
        dataset: '=?',
        reset: '=',
        options: '=',
        series: '=',
        callback: '=',
        src: '='
    },
    link: link
}; 

...

function onDatasetChanged(dataset)
{
    if (plot && !scope.reset)
    {
        plot.setData(dataset);
        plot.setupGrid();
        return plot.draw();
    }
    else
    {
        scope.reset = false;
        plot = init();
        onSerieToggled(scope.series);
        return plot;
    }
}

当数据发生变化时，Flot图表最后绘制了新的点

1 个答案: