在ng2-nvd3中引用外部数据集的.json文件

我正在使用ng2-nvd3，并且我想访问外部json数据。根据下面的代码片段，我如何引用.json文件来保存与下面this.data数组中显示的数据相同的数据？在ng2-nvd3中引用外部数据集的.json文件

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

}

来源

2016-05-09 Joel

是否要装入该文件在运行时使用HTTP，还是始终是静态的，你只是想将它移动到另一个文件，以保持这个组件小？ –

@James Stewart，如何在运行时用http处理加载文件。这就是我想要的。 – kplus

如果你只是想要在一个单独的文件中的数据。在那里

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;

来源

2016-05-09 21:09:33

请你能帮助回答这个问题：http://stackoverflow.com/questions/40709470/how-to-use-dynamic-csv-data-for-visualisation-with-nvd3-and-angular2 – kplus

在ng2-nvd3中引用外部数据集的.json文件

回答

相关问题