chart.js v2.0.0 重绘图表答案

【问题标题】：chart.js v2.0.0 redrawing the chartchart.js v2.0.0 重绘图表
【发布时间】：2016-09-16 19:54:06
【问题描述】：

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

我已经为这个插件创建了一个角度包装器，以便将它放到我的应用程序中。包装器如下所示：

.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>

目前，我仅在类型不是原始类型时才显示图表。当我选择 line 时，它会绘制一个折线图，如果我然后选择 bar 它不会做任何事情。我已经尝试了各种方法来重绘它，但它似乎不起作用。最新的建议是扩展配置（这是我在 init 方法中所做的），以便创建一个副本，然后使用该配置副本创建一个新图表。这不起作用。

有人知道我怎样才能让它工作吗？

【问题讨论】：

标签： javascript angularjs chart.js

【解决方案1】：

我发现如果我修改了数据，图表会自己重新绘制。因此，考虑到这一点，我将我的 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);
};

这很奏效，它现在可以正确重绘。我猜那是因为它必须检查数据是否发生了变化，如果我做了一个副本，那么它总是在变化。

【讨论】：