Question

我有一个网络应用程序，它做了一些值的总和，然后应该在饼图中绘制这些值，我有一些关于此图表的图例颜色的问题。

总结

在迭代了许多不同的对象之后，总和被附加到类别数组中的每个对象：

    // 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我似乎在饼图中的某些类别sum属性上未定义。这使得饼图无法正确呈现。我认为这是因为在渲染图表时没有完成求和。

Failing to render data since it has not been generated yet

NG-IF延迟图表的渲染

但是，如果在第二个饼图上有或没有ng-if，则第二个图表上的图例都是黑色的。即使我添加自己的颜色函数来设置legendColor，它也会失败我的第二个图表。 legendColor="colorFunction()"。然而，图表被渲染，只有传说是黑色的。

Legend is black on second chart

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

$ scope.xBudget = function（）{ 返回函数（d）{ 返回d.name +＆＃39;：＆＃39; + 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添加到我的第一张图表中，它也无法为我添加图例颜色： enter image description here

有没有人有过类似的经历，或者碰巧知道发生了什么？

Answer 1

我只想补充一下：

$scope.chart.display = true;

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

在你的小提琴里。

似乎没问题。

fiddle

angularjs-nvd3-directives在ng-if内部时，图例着色不起作用

1 个答案: