I am using chart.js v2 in my application because when I try to use bower to get the latest version it doesn't pull in the dist folder, but that is another issue.
我在我的应用程序中使用chart.js v2,因为当我尝试使用bower获取最新版本时,它不会拉入dist文件夹,但这是另一个问题。
I have created an angular wrapper for this plugin to get it onto my application. The wrapper looks like this:
我为这个插件创建了一个角度包装器,以便将它放到我的应用程序中。包装器看起来像这样:
.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);
});
}
};
});
It is very simple as you can see. In my controller I have this:
你可以看到它非常简单。在我的控制器中我有这个:
self.reportType = 'raw';
self.reportTypes = [{ name: 'Raw data', type: 'raw' }, { name: 'Bar chart', type: 'bar' }, { name: 'Line chart', type: 'line' }];
And in my view I have this:
在我看来,我有这个:
<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>
Currently I only show the chart if the type is not raw. When I select line it will draw a line chart, if I then select bar it won't do anything. I have tried all sort of things to get it to redraw but it doesn't seem to work. The latest suggestion was the extend the config (which is what I am doing in the init method) so to create a copy and then use that config copy to create a new chart. This didn't work.
目前我只显示图表,如果类型不是原始的。当我选择线条时,它将绘制折线图,如果我然后选择条形图它将不会做任何事情。我已经尝试过各种各样的东西来重绘它,但它似乎不起作用。最新的建议是扩展配置(这是我在init方法中所做的)所以创建一个副本然后使用该配置副本来创建一个新的图表。这没用。
Does anyone know how I can get it to work?
有谁知道我怎么能让它工作?
1 个解决方案
#1
0
I found that if I modified the data, the chart redrew itself. So with that in mind, I changed my init method to this:
我发现如果我修改了数据,那么图表就会重新开始。所以考虑到这一点,我将我的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);
};
And that worked, it now redraws properly. I guess that is because it must check to see if the data has changed, if I do a copy then it is always changing.
这很有效,现在可以正确地重绘。我想这是因为它必须检查数据是否已经改变,如果我做了一个副本,那么它总是在变化。
#1
0
I found that if I modified the data, the chart redrew itself. So with that in mind, I changed my init method to this:
我发现如果我修改了数据,那么图表就会重新开始。所以考虑到这一点,我将我的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);
};
And that worked, it now redraws properly. I guess that is because it must check to see if the data has changed, if I do a copy then it is always changing.
这很有效,现在可以正确地重绘。我想这是因为它必须检查数据是否已经改变,如果我做了一个副本,那么它总是在变化。