無法在AngularJS版本的SmartAdmin模板中使用動態數據處理sparklines

我正在使用可用的SmartAdmin Bootstrap模板的AngularJS版本here來處理項目。無法在AngularJS版本的SmartAdmin模板中使用動態數據處理sparklines

作爲項目的一部分，我需要在幾個頁面中添加迷你圖。我有它的工作只是靜態數據細如：

<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和Bootstrap的新手，所以我肯定我錯過了一些東西，我只是不確定在哪看到這個。

該模板使用Bootstrap 3.3和Angular 1.4.2。

來源

2015-12-01 Joseph

謝謝你的解決方案。我有另一個問題（https://stackoverflow.com/questions/37027755/unable-to-get-sparklines-working-in-angularjs-version-of-smartadmin-模板） - 添加一個sparkline與數據後* ..它不顯示。我可以看到90，60，...（無圖）。我錯過了什麼？ – Juri

@Joseph我對AngularJS4.X版本也有同樣的問題，你的解決方案是1.X版本，但我使用的是4.x版本。在這個問題上你是否收到過'smartadmin'支持的迴應？ – user1653027

@ user1653027不是我記得儘管公平，但它是近兩年前。 – Joseph

我最終創建了一個指令。完成的指令是：

"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-02 21:12:01 Joseph

無法在AngularJS版本的SmartAdmin模板中使用動態數據處理sparklines

回答

相關問題