Невозможно заставить спарклайны работать с динамическими данными в версии AngularJS шаблона SmartAdmin.

Я работаю над проектом, используя версию шаблона 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 предоставляет способ реализации спарклайнов jQuery без прямого манипулирования javascript. Это причина директив 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.


javascript angularjs sparklines smartadmin
person Joseph    schedule 01.12.2015    source источник
comment
Спасибо за ваше решение. У меня есть другая проблема (stackoverflow.com/questions/37027755/) - после добавления спарклайна с данными-* .. он не отображается. Я вижу 90, 60, ... (без графика). Я что-то пропустил?   -  person Juri    schedule 09.05.2016
comment
@Joseph Джозеф У меня такая же проблема с версией AngularJS4.X, ваше решение предназначено для версии 1.X, но я использую версию 4.x. Получили ли вы какой-либо ответ от службы поддержки smartadmin по этому вопросу?   -  person user1653027    schedule 14.09.2017
comment
@user1653027 user1653027 Не то чтобы я припоминаю, хотя, честно говоря, это было почти два года назад.   -  person Joseph    schedule 14.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

В итоге я создал директиву. Завершенная директива:

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

Я уверен, что есть лучший способ сделать параметры, но пока это работает так, как мне нужно. Спасибо тем, кто заглянул.

person Joseph    schedule 02.12.2015