在ng2-nvd3中引用外部數據集的.json文件

Question

我正在使用ng2-nvd3，並且我想訪問外部json數據。根據下面的代碼片段，我如何引用.json文件來保存與下面this.data數組中顯示的數據相同的數據？

import {Component} from 'angular2/core'; 
declare let d3:any; 
import {nvD3} from 'ng2-nvd3'; 

@Component({ 
    selector: 'bar-chart', 
    directives: [nvD3], 
    template: ` 
    <div> 
     <nvd3 [options]="options" [data]="data"></nvd3> 
    </div> 
    ` 
}) 
export class BarChartComponent { 
    options; 
    data; 

    ngOnInit() { 
    this.options = { 
     chart: { 
     type: 'discreteBarChart', 
     height: 450, 
     margin: { 
      top: 20, 
      right: 20, 
      bottom: 50, 
      left: 55 
     }, 
     x: function (d) { 
      return d.label; 
     }, 
     y: function (d) { 
      return d.value; 
     }, 
     showValues: true, 
     valueFormat: function(d){ 
      return d3.format(',.4f')(d); 
     }, 
     duration: 500, 
     xAxis: { 
      axisLabel: 'X axis', 
     }, 
     yAxis: { 
      axisLabel: 'Y axis', 
      axisLabelDistance: -10 
     } 
     } 
    } 

    //Want to replace this with an external json file. 
    this.data = [ 
     { 
     key: "Cumulative Return", 
     values: [ 
      { 
      "label": "A", 
      "value": -29.765957771107 
      }, 
      { 
      "label": "B", 
      "value": 0 
      }, 
      { 
      "label": "C", 
      "value": 32.807804682612 
      }, 
      { 
      "label": "D", 
      "value": 196.45946739256 
      }, 
      { 
      "label": "E", 
      "value": 0.19434030906893 
      }, 
      { 
      "label": "F", 
      "value": -98.079782601442 
      }, 
      { 
      "label": "G", 
      "value": -13.925743130903 
      }, 
      { 
      "label": "H", 
      "value": -5.1387322875705 
      } 
     ] 
     } 
    ]; 
    } 

} 

Answer 1

如果你只是想要在一個單獨的文件中的數據。在那裏

your.data.service.ts

：

創建一個新的文件

export class YourDataService{ 


    public data: Array<any> = [ 
    { 
     key: "Cumulative Return", 
     values: [ 
     { 
      "label": "A", 
      "value": -29.765957771107 
     }] 
    }] 

然後在組件導入並引用它

import{YourDataService} from './your.data.service.ts' 


public _data: Array<any>= YourDataService.data;