javascript - Angular :过滤对象数据以构建具有不同元素属性的Highchart小部件

我正在从Web服务加载json数据，并将接收到的数据注入到我的列表组件中，

像下面这样：

import {Component, OnInit} from '@angular/core';
import 'rxjs/add/operator/map'
import {HttpService} from '../http.service';

import * as $ from 'jquery';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  providers: [HttpService]
})

export class ListComponent implements OnInit {

  dataItems: any;
  nb = 0;
  private dataUrl = 'http://localhost:3000/list';  // URL to web api
  constructor(private dataServer: HttpService ) {}
  ngOnInit() {
    this.dataServer.loadDataItems(this.dataUrl).subscribe(
      data => {
        this.dataItems = data;
        console.log(this.dataItems);
        for (let i = 0 ; i < this.dataItems.length ; i++) {
          // console.log(this.dataItems[i].g);
          if (this.dataItems[i].browser === 'Firefox') {
            this.nbFirefox++
          }
          if (this.dataItems[i].browser === 'Chrome') {
            this.nbChrome++
          }
        }
        console.log(this.nbFirefox);  //print the firefox occurences
        console.log(this.nbCHrome);  //print the chrome occurences

        ...

// HIGHCHART WIDGET TO BUILD :

        Highcharts.chart('systemsChart', {
          chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
          },
          title: {
            text: this.nb
          },
          tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: false
              },
              showInLegend: true
            }
          },
          series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
              name: 'Microsoft Internet Explorer',
              y: 56.33
            }, {
              name: 'Chrome',
              y: 24.03,
              sliced: true,
              selected: true
            }, {
              name: 'Firefox',
              y: 10.38
            }, {
              name: 'Safari',
              y: 4.77
            }, {
              name: 'Opera',
              y: 0.91
            }, {
              name: 'Proprietary or Undetectable',
              y: 0.2
            }]
          }]
        });
      }
    );
  }
}

如您在我的数据中看到的，this.dataItems.browser指的是几个导航器，我不会手动列出它们，我想动态过滤每个浏览器出现的事件，并构建我的Highchart小部件，在那里我习惯于为其添加每个维度值

静态方式（不好）：

series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
              name: 'Microsoft Internet Explorer',
              y: 56.33
            }, {
              name: 'Chrome',
              y: 24.03,
              sliced: true,
              selected: true
            }, {
              name: 'Firefox',
              y: 10.38
            }, {
              name: 'Safari',
              y: 4.77
            }, {
              name: 'Opera',
              y: 0.91
            }, {
              name: 'Proprietary or Undetectable',
              y: 0.2
            }]
          }]

我的目的是在不输入每种浏览器类型的情况下，以动态方式过滤数据并构建图表，因为我不知道完整的列表

有任何想法吗 ？？

最佳答案

听起来您需要根据这样的响应动态构建浏览器列表：

browsers: {[key:string]:number} = {};
this.dataServer.loadDataItems(this.dataUrl).subscribe(
  data => {
    this.dataItems = data;
    console.log(this.dataItems);
    this.dataItems.forEach(item => {
        if (this.browsers[item.browser]) {
           this.browsers[item.browser] += 1;
        } else {
           this.browsers[item.browser] = 1;
        }
    });
  }
});

然后，您将拥有一个对象，其中浏览器名称为键，出现次数为值。然后，您可以遍历关键的值对以构建图表的数据系列。