2

私は、ha angularJs バージョンの easypiechart を使用して、値の変更時に単純なスケール カラーを作成しようとしています。値が変わると、色が赤から緑に変わります。

jqueryベースの古いeasypiechartバージョンでは、これは同様のことを行うことで可能でした：

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

私がやろうとしていることを示すためにプランカーを作成しました。上は角度があり、下はjqueryです: http://plnkr.co/edit/7yQ1SiIPHFh62yxwnW9e?p=preview

4

1 に答える 1

0

自分で定義したより複雑なディレクティブで簡単な円グラフを使用していたことを除いて、私はあなたと同じ問題を抱えていました。パーセンテージとオプションのモデル変数をスコープに渡す方法を考え出し、外部ディレクティブの属性が変更されたときに変更を加えるには、かなりの時間を費やしていました。このため、私は easyPieChart の angular バージョンを放棄し、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-15T06:20:03.263 に答える