0

我正在为我的数据制作饼图。我正在使用Angular Chart（以及随后的charts.js）。

我的数据看起来像这样（vm是控制器）：

vm.persons = [
  {
    name:'smith',
    cart: [
      {
        id: 1,
        category: 'food'
      },
      {
        id: 2,
        category: 'clothes'
      }
    ]
  },
  {
    name: 'adams',
    cart: [
      {
        id: 3,
        category: 'automobile'
      },
      {
        id:1, category: 'food'
      }
    ]
  }
]

因此，我的模板如下所示：

<div ng-repeat="person in vm.persons">
  <div class="person-header">{{person.name}}</div>
  <!-- chart goes here -->
  <canvas class="chart chart-pie" chart-data="person.cart | chart : 'category' : 'data'" chart-labels="person.cart | chart : 'category' : 'labels'"></canvas>
  <div class="person-data" ng-repeat="item in person.cart">
    <div>{{item.category}}</div>
  </div>
</div>

我决定为图表使用过滤器，因为我认为这是合适的、干燥且可重复使用的：

angular.module('myModule').filter('chartFilter', function() {
  return function(input, datum, key) {
    const copy = JSON.parse(JSON.stringify([...input.slice()])); // maybe a bit overboard on preventing mutation...
    const entries = Object.entries(copy.reduce((o,n) => {o[n[datum]] = (o[n[datum]] || 0) + 1}, {}));
    const out = {
      labels: entries.map(entry => entry[0]);
      data: entries.map(entry => entry[1]);
    };
    return out[key];
  }
});

这有效，并且图表确实显示了正确的数据。但是，根据控制台，它infdig error每次都会抛出一个。根据文档，这是因为我要返回一个新数组，因为它几乎是一组不同的数据。即使我摆脱copy（这意味着完全是一个单独的对象）并input直接使用（input.reduce(o,n)等）它仍然会引发错误。

我也尝试将其变成一个函数（在控制器中）：

vm.chartBy = (input, datum, key) => {
  const copy = JSON.parse(JSON.stringify([...input.slice()])); // maybe a bit overboard on preventing mutation...
  const entries = Object.entries(copy.reduce((o,n) => {o[n[datum]] = (o[n[datum]] || 0) + 1}, {}));
  const out = {
    labels: entries.map(entry => entry[0]);
    data: entries.map(entry => entry[1]);
  };
  return out[key];
};

并在模板中：

<canvas class="chart chart-pie" chart-data="vm.chartBy(person.cart, 'category', 'data')" chart-labels="vm.chartBy(person.cart, 'category', 'labels')"></canvas>

但是，这也会引发infdig错误。

有谁知道如何不让它infdig每次都通过错误？这就是我要解决的问题。

4

1 回答 1

1

正如您所指出的，您不能绑定到生成新数组的函数，否则摘要循环将永远不会满足于新值与旧值匹配，因为数组引用每次都会更改。

相反，只绑定到数据，然后在指令中实现过滤器，这样过滤后的数据永远不会被绑定，只是显示在指令的模板中。

HTML 

<canvas class="chart chart-pie" chart-data="person.cart" chart-labels="person.cart"></canvas>

JavaScript

app.directive('chartData', function(){
    return {
        template: '{{chartData | chart : "category" : "data"}}',
        scope: {
            'chartData': '='
        }
    }
});

app.directive('chartLabels', function(){
    return {
        template: '{{chartLabels | chart : "category" : "labels"}}',
        scope: {
            'chartLabels': '='
        }
    }
});

app.filter('chart', function() {
    return function(input, datum, key) {
        ...
        return out[key];
    }
});

我已经在指令中硬编码了数据/键字符串，但如果需要，您可以将它们作为附加绑定传递。

简单的模拟小提琴

于 2018-10-01T00:10:08.163 回答