Easypiechart angularJs改變顏色

我試圖使用ha的angularjs版本的easypiechart創建一個簡單的價值變化的比例顏色。顏色應該隨着價值變化而改變，從紅色變爲綠色。Easypiechart angularJs改變顏色

在舊版本easypiechart，基於jQuery，這是可以通過做類似的事情：

barColor: function(percent) { 
    percent /= 100; 
    return "rgb(" + Math.round(255 * (1-percent)) + ", " + Math.round(255 * percent) + ", 0)"; 
}

我做了一個plunker到demonstarete什麼，我試圖做的，好處是角，下行空間jquery：http://plnkr.co/edit/7yQ1SiIPHFh62yxwnW9e?p=preview

來源

2013-10-27 Tropicalista

我和你有同樣的問題，除了我在自定義的更復雜的指令中使用簡單的餅圖。我有一段時間瞭解如何在範圍中傳遞百分比和選項模型變量，並在外部指令的屬性發生變化時進行更改。因此，我放棄了easyPieChart的角色版本，並返回到jQuery版本（可能是我，而不是easypiechart指令，因爲我是新角色，所以我與一些概念鬥爭）。

這裏是我的代碼的簡化版本顯示我所做的：

我的指令infoBox.js：

'use strict'; 

commonApp.directive('infoBox', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     percent: '@', 
     text: '@', 
     content: '@', 
     textIsNumber: '@' 
    }, 
    templateUrl: '/directives/infoBox.html', 
    controller: 'infoBoxController', 
    } 
    }; 
});

我的模板infoBox.html

<div class="infobox"> 
    <div class="infobox-progress"> 
    <div class="easy-pie-chart percentage" data-percent="{{percent}}" data-size="50"> 
     <span class="percent">{{percent}}</span>% 
    </div> 
    </div> 
    <div class="infobox-data"> 
    <span ng-class="{'infobox-data-number': textIsNumber, 'infobox-text': !textIsNumber}" class="infobox-data-number">{{text}}</span> 

    <div class="infobox-content"> 
     {{content}} 
    </div> 
    </div> 
</div>

而且我控制器infoBoxController .js

'use strict'; 

commonApp.controller('infoBoxController', 
    function infoboxController($scope, $log, $attrs, $element) { 
    var init = function() { 
     var $chart = $element.find('.easy-pie-chart.percentage')[0]; 
     var barColor = $element.data('color') || (!$element.hasClass('infobox-dark') ? $element.css('color') : 'rgba(255,255,255,0.95)'); 
     var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2'; 
     $($chart).easyPieChart({ 
     barColor: barColorFunction, 
     trackColor: trackColor, 
     scaleColor: false, 
     lineCap: 'butt', 
     lineWidth: parseInt(size/10), 
     animate: /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase()) ? false : 1000, 
     size: size 
     }); 
    }; 
    var barColorFunction = function (percent) { 
     if (percent <= 100) { 
     return ($element.data('color') || (!$element.hasClass('infobox-dark') ? $element.css('color') : 'rgba(255,255,255,0.95)')); 
     } else { 
     return ('rgba(255, 0, 0, 0.7)'); 
     } 
    }; 

    init(); 
    var update = function() { 
     var $chart = $element.find('.easy-pie-chart.percentage')[0]; 
     $($chart).data('easyPieChart').update($attrs.percent); 
    }; 
    $scope.$watch(function() { 
     return [$attrs.percent]; 
    }, update, true); 
    } 
);

指令用法：

<info-box class="infobox-blue2" percent="{{modelPercent}}" text="describes pie chart" text-is-number="false" content="more describing pie chart"></info-box>

我有我的屬性％，其中運行直jQuery的更新功能的手錶。 barColorFunction控制着我顯示的顏色。

情況稍有不同，但我希望這有助於。

來源

2014-01-15 06:20:03

Easypiechart angularJs改變顏色

回答

相關問題