Question

对不起，我是棱角分明的新手，我有静态数据的图表，以及如何使用ng2-chart显示图表，其中数据来自databse / sql？

html：

<div>
  <div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
  <button (click)="randomize()">Update</button>
</div>

打字稿：

 export class BarChartDemoComponent {
  public barChartOptions:any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;

  public barChartData:any[] = [
    {data: [165, 159, 180, 181, 156, 155, 140], label: 'Maba'},
    {data: [128, 148, 140, 119, 86, 127, 90], label: 'Alumni'}
  ];
 }

Answer 1

您需要对数据进行分组并相应地创建图表，

export class DashboardComponent implements OnInit {
  @ViewChild(BaseChartDirective) private _chart;

  lineChartLabels: String[] = [];
  fromDate: NgbDateStruct;
  toDate: NgbDateStruct;
  role: string;
  datasets: any[];
  public lineChartOptions: any = {
    animation: false,
    responsive: true
  };
  public lineChartLegend = true;
  public lineChartType = 'line';

  constructor() { }

  ngOnInit() {
    this.datasets = [{ data: [] }];
 }

  forceChartRefresh() {
    setTimeout(() => {
      this._chart.refresh();
    }, 10);
  }
  getChartDetails() {
    this.lineChartLabels = [];
    this.datasets = [];
    this._reportService.getChartInfo(yourApi).subscribe((response) => {
      const grouped = response.lstBalances.map(function (o) {
          return {
            data: o.AccountBalanceOnMonth.map(function (p) { return +p.year; }),
            label: o.totalAlumni
          };
        });
        this.buildchart(grouped, response.lstYears);


    });
  }
  buildchart(data: any, labels: any) {
    this.datasets = data;
    for (const label of labels) {
      this.lineChartLabels.push(label);
    }
    this.datasets = this.datasets.slice();
    this.forceChartRefresh();
  }

}

如何从数据库中显示图表ng2-chart？

1 个答案: