0

値の合計を行い、これらの値を円グラフにプロットすることになっている Web アプリがあります。このグラフの凡例の色に関していくつかの問題があります。

合計:

合計は、その合計に寄与する多くの異なるオブジェクトを反復した後、categorys 配列内の各オブジェクトに添付されます。

    // Find a list of Categories
    $scope.find = function() {
      var that = this;
      Categories.query().$promise.then(function(categories){
        that.categories=categories;

        categories.forEach(function(category){
          getExpensesForCategory(category._id, 8).then(function(cashflows){
            category.sum = getTotalCashflowSum(cashflows); //<- sum is attached
          });
        });
      });
    };

意見：

私は、2 つの円グラフを作成していると考えています。

上記のように、各カテゴリの費用の合計の 1 つの円グラフ。合計が完了するまで待つ必要があります。そうしないと、合計が未定義になる可能性があるため、ng-if を追加して、最後の合計が追加されていることを確認します (以下のコード、2 番目のグラフを参照)。

<div class=" well" style="text-align: center" >
    <div class="pie-group" >
    <h3>Budget distribution:</h3>
    <nvd3-pie-chart
            data="categories"
            id="budgetPie"
            width="350"
            height="350"
            x="xBudget()"
            y="yBudget()"
            showLegend="true"
            color="colorFunction()"
            legendColor="colorFunction()"
            >
        <svg height="250"></svg>
    </nvd3-pie-chart>
    </div>

    <div class="pie-group" data-ng-if="categories[categories.length-1].sum!==undefined">
    <h3>Actual consumption:</h3>
    <nvd3-pie-chart
            data="categories"
            id="consumptionPie"
            width="350"
            height="350"
            x="xConsumption()"
            y="yConsumption()"
            showLegend="true"
            color="colorFunction()"
            legendColor="colorFunction()"
            >
        <svg height="250"></svg>
    </nvd3-pie-chart>
</div>
</div>

レンダリング前に合計が完了していません: 未定義の値

ng-if を削除すると、円グラフの一部のカテゴリの合計属性が未定義になるようです。これにより、円グラフが適切にレンダリングされなくなります。これは、チャートのレンダリング時に合計が完了していないためだと思います。

まだ生成されていないため、データのレンダリングに失敗しています

チャートのレンダリングを遅らせるNG-IF

ただし、2 番目の円グラフで ng-if の有無にかかわらず、凡例は 2 番目のグラフですべて黒くなります。独自のカラー関数を追加して legendColor を設定しても、2 番目のチャートでは失敗します。legendColor="colorFunction()". ただし、チャートはレンダリングされ、凡例のみが黒になります。

凡例は 2 番目のグラフで黒です

チャートをセットアップするためにビューから呼び出しているメソッドは次のとおりです。

$scope.xBudget = function(){ return function(d) { return d.name+': '+d.amount ; }; };

  $scope.xConsumption = function(){
    return function(d) {
      return d.name+': '+d.sum ;
    };
  };

  $scope.yBudget = function(){
    return function(d){
      return d.amount;
    };
  };

  $scope.yConsumption = function(){
    return function(d){
      return d.sum;
    };
  };

  var colorArray = ['#FF0000', '#0000FF', '#FFFF00', '#00FFFF'];
  $scope.colorFunction = function() {
    return function(d, i) {
      return colorArray[i];
    };
  };

最初のチャートに ng-if を追加すると、凡例の色付けにも失敗します: ここに画像の説明を入力

誰かが同様の経験をしたことがありますか、それともたまたま何が起こっているのか考えていますか?

4

1 に答える 1

0

追加するだけです：

$scope.chart.display = true;

<div ng-if="chart.display">
    <nvd3-pie-chart
        data="exampleData"
        id="exampleId"
        ...

あなたのフィドルで。

大丈夫そうです。

フィドル

于 2015-01-12T01:34:04.347 に答える