Question

我正在从网络服务加载 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小部件，我在那里; m用于添加每个维度及其值

静态方式（不好）：

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

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

Angular：过滤对象数据以构建具有不同元素属性的Highchart Widget

1 个答案: