chart.js v2.0.0重新绘制图表

我在我的应用程序中使用chart.js v2，因为当我尝试使用bower获取最新版本时，它不会拉入dist文件夹，但那是另一个问题。chart.js v2.0.0重新绘制图表

我已经为这个插件创建了一个角度包装，以将其包装到我的应用程序中。的包装看起来是这样的：

.controller('ChartController', function() { 
    var self = this; 

    // Create our chart 
    self.init = function (ctx, data, options, type) { 

     // Create our config 
     var config = angular.extend({}, { type: type || 'bar', data: data, options: options || {} }); 

     // Create our chart 
     self.chart = new Chart(ctx[0], config); 
    }; 
}) 

.directive('ngChart', function() { 
    return { 
     restrict: 'A', 
     controller: 'ChartController', 
     scope: { 
      data: '=ngChart', 
      type: '@', 
      options: '=' 
     }, 
     link: function (scope, element, attrs, controller) { 
      scope.$watch('type', function() { 
       controller.init(element, scope.data, scope.options, scope.type); 
      }); 
      scope.$watch('data', function() { 
       controller.init(element, scope.data, scope.options, scope.type); 
      }); 
     } 
    }; 
});

这是因为你可以看到非常简单。在我的控制器我有这样的：

self.reportType = 'raw'; 
self.reportTypes = [{ name: 'Raw data', type: 'raw' }, { name: 'Bar chart', type: 'bar' }, { name: 'Line chart', type: 'line' }];

在我看来，我有这样的：

<div class="inputs"> 
    <div class="portlet-input input-inline input-small"> 
     <select class="form-control" ng-model="controller.reportType" ng-change="controller.test()" ng-options="type.type as type.name for type in controller.reportTypes"> 
     </select> 
    </div> 
</div> 

<div ng-if="controller.list.length && controller.reportType !== 'raw'"> 
    <div class="form-group"> 
     <button class="btn btn-default" ng-print><i class="fa fa-print"></i> Print</button> 
    </div> 

    <canvas class="print-only screen-only" ng-chart="controller.chartData" type="{{ controller.reportType }}"></canvas> 
</div>

目前我只显示在图表上，如果类型是不生。当我选择行它会绘制折线图，如果我然后选择酒吧它不会做任何事情。我已经尝试过所有的事情来重绘它，但它似乎并没有工作。最新的建议是扩展配置（这是我在init方法中做的），以便创建一个副本，然后使用该配置副本创建一个新图表。这没有奏效。

有谁知道我如何才能使它工作？

来源

2016-09-16 r3plica

我发现如果我修改了数据，图表就会自行更新。所以考虑到这一点，我改变了我的init（）方法，以这样的：

// Create our chart 
self.init = function (ctx, data, options, type) { 

    // Create our config 
    var config = { type: type || 'bar', data: angular.copy(data), options: options || {} }; 

    // Create our chart 
    self.chart = new Chart(ctx[0], config); 
};

和起作用的，它现在重绘正确。我想这是因为它必须检查数据是否发生了变化，如果我做了副本，那么它总是在变化。

来源

2016-09-16 11:54:06 r3plica

chart.js v2.0.0重新绘制图表

回答

相关问题