无法在 AngularJS 版本的 SmartAdmin 模板中使用动态数据制作迷你图

Question

我正在使用 AngularJS 版本的 SmartAdmin Bootstrap 可用模板开发一个项目 here。

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

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

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

我确信有更好的方法来执行这些选项，但这是我现在需要的。感谢看过的人。

无法在 AngularJS 版本的 SmartAdmin 模板中使用动态数据制作迷你图

Unable to get sparklines working with dynamic data in AngularJS version of SmartAdmin template

javascript

sparklines

angularjs

smartadmin