javascript - Angular : Filter object data to build a Highchart Widget with distinct elements attributes

Question

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

如下所示:

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
            }]
          }]

我的目的是过滤数据并动态构建图表，而无需输入每种浏览器类型，因为我不知道完整列表

有什么想法吗？

Answer 1

听起来您需要从响应中动态构建浏览器列表，如下所示:

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

然后您将获得一个对象，其中浏览器名称作为键，出现次数作为值。然后，您可以迭代键、值对来构建图表的数据系列。