在Angular中如何读取JSON文件数据渲染ng2-chart/Chart.js柱状、饼图等图表？

1. 存放JSON文件 #

把你准备好的JSON文件放到Angular项目的src/assets目录下，命名为chart-data.json即可。

2. 导入HTTP请求模块 #

打开项目根模块app.module.ts，导入HttpClientModule并添加到imports数组里，代码如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { BarChartComponent } from './bar-chart/bar-chart.component';

@NgModule({
  declarations: [
    AppComponent,
    BarChartComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 修改柱状图组件TS代码 #

修改bar-chart.component.ts，注入HttpClient读取JSON文件，转换格式后赋值给图表绑定的变量：

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent implements OnInit {

  barChartOptions: ChartOptions = {
    responsive: true,
  };
  // 对应JSON里每组data的三个值，可根据实际需求修改
  barChartLabels: Label[] = ['第一季度', '第二季度', '第三季度'];
  barChartType: ChartType = 'bar';
  barChartLegend = true;
  barChartPlugins = [];
  barChartData: ChartDataSets[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<{name: string, data: number[]}[]>('/assets/chart-data.json').subscribe(res => {
      this.barChartData = res.map(item => {
        return {
          data: item.data,
          label: item.name
        }
      })
    })
  }

}

4. HTML代码无需修改 #

你之前写的HTML模板代码可以直接沿用，不需要调整。

内容的提问来源于stack exchange，提问作者Ben Martin