2

我正在使用此处提供的 SmartAdmin Bootstrap 模板的 AngularJS 版本进行项目。

作为项目的一部分，我需要在几个页面中添加迷你图。我让它可以很好地处理静态数据，例如：

<div id="revenue-chart" class="sparkline no-padding bg-dark-orange" 
     data-sparkline-type="line" 
     data-fill-color="#ffc65d" 
     data-sparkline-line-color="#ffc65d" 
     data-sparkline-spotradius="0" 
     data-sparkline-width="100%"
     data-sparkline-height="180px"> 90,60,50,75,30,42,19,100,99,76,89,65 </div>

SmartAdmin 模板提供了一种无需直接操作 javascript 即可实现 jQuery 迷你图的方法。这就是 data-* 指令的原因。

但是，当我将代码切换到以下代码时，它不再显示图表。

<div id="revenue-chart" class="sparkline no-padding bg-dark-orange" 
     data-sparkline-type="line" 
     data-fill-color="#ffc65d" 
     data-sparkline-line-color="#ffc65d" 
     data-sparkline-spotradius="0" 
     data-sparkline-width="100%"
     data-sparkline-height="180px"> {{revenue.points}} </div>

我<div> {{revenue.points}} </div>在页面上添加了一个，它正确打印了值，所以我知道这些值正在传递给页面。

我的猜测是，在处理 Angular 代码之前正在渲染图表，因此没有显示图表的数据。在发生 Angular 替换后，我可以添加一些代码来触发要重绘的图形吗？或者是否可以延迟绘制图表直到替换发生？

我是 Angular 和 Bootstrap 的新手，所以我确定我遗漏了一些东西，我只是不确定在哪里可以看到这个。

该模板使用 Bootstrap 3.3 和 Angular 1.4.2。

4

1 回答 1

1

我最终创建了一个指令。完成的指令是：

"use strict";
angular.module('app.tvidash').directive('inlineRevenueChart', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            data: '='
        },
        link: function(scope, element, attrs, ngModel){
            var opts = {};

            opts.type = attrs.type || 'line';

            scope.$watch(attrs.ngModel, function() {
                render();
            });

            scope.$watch(attrs.opts, function(){
                render();
            });

            var render = function() {
                var model;

                if(attrs.opts) angular.extend(opts, angular.fromJson(attrs.opts));
                console.log(opts);

                // Trim trailing comma if we are a string
                angular.isString(ngModel.$viewValue) ? model = ngModel.$viewValue.replace(/(^,)|(,$)/g, "") : model = ngModel.$viewValue;

                var data;

                // Make sure we have an array of numbers
                angular.isArray(model) ? data = model : data = model.split(',');

                $(element).sparkline(data, opts);
            };
        }
    }
});

以及随附的 div 标签：

<div id="revenue-chart" class="db-chart sparkline no-padding bg-dark-orange" 
    inline-revenue-chart 
    ng-model="revenue.points" 
    opts="{{ {type: 'line', width: '100%', height: '180px', lineColor: '#ffc65d', fillColor: '#ffc65d', spotRadius: 0.1, drawNormalOnTop: false} }}"></div>

我确信有更好的方法来做这些选项，但这正在我现在需要的时候工作。感谢那些看过的人。

于 2015-12-02T21:12:01.560 回答