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>

ページにa を追加する<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 に答える