角：过滤对象数据建立一个Highchart的Widget与不同的元素属性

Question

我从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小部件，还有我已经习惯了添加每个维度的智慧^ h其价值

静态方式（不好）：

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

我的目的是筛选我的数据和dynmaically建立图表，而不enterning每个浏览器类型，因为我不知道完整列表

任何想法??

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

你再有浏览器的名称作为钥匙，而出现的数目的对象价值。然后，您可以迭代关键值对，为图表构建数据系列。