0

我有一个网络应用程序，它对值进行一些求和，然后应该在饼图中绘制这些值，我对此图表的图例颜色有一些问题。

总结：

在迭代了许多对所述总和有贡献的不同对象之后，总和将附加到类别数组中的每个对象：

    // 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
          });
        });
      });
    };

看法：

我的观点是我正在制作两个饼图： 一个饼图的数量：从一开始就是每个类别的属性。

如上所述，每个类别的费用总和的饼图。我必须等待求和完成，否则我的总和可能未定义，因此我添加了一个 ng-if 以确保已附加最后一个总和（参见下面的代码，第二张图表）。

<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 延迟图表的渲染

但是，无论是否在第二个饼图上使用 ng-if，图例在第二个图表上都是黑色的。即使我添加自己的颜色函数来设置legendColor，我的第二个图表也失败了。legendColor="colorFunction()". 然而，图表被渲染，只有图例是黑色的。

第二张图表上的图例为黑色

以下是我从视图中调用来设置图表的方法：

$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 回答