угловые ng2-диаграммы (гистограммы с накоплением) не загружаются из файла json - PullRequest
Новая
       20

угловые ng2-диаграммы (гистограммы с накоплением) не загружаются из файла json

0 голосов
/ 27 мая 2019

Я пытаюсь загрузить записи из файла json (гистограмма с накоплением ng2-диаграмм), но данные не загружаются в диаграммы. Я вижу ответ с помощью console.log, но не могу назначить массив json массиву диаграмм. Пожалуйста, предложите мне, что мне делать?

Мой файл компонента. 

import { Component, OnInit } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import * as pluginDataLabels from "chartjs-plugin-datalabels";
import { Label } from "ng2-charts";
import { BarChartService } from "../service/bar-chart.service";

@Component({
  selector: "app-second-bar-chart",
  templateUrl: "./second-bar-chart.component.html",
  styleUrls: ["./second-bar-chart.component.css"]
})
export class SecondBarChartComponent implements OnInit {
  public barChartData: ChartDataSets[];
  public parentChartData: ChartDataSets[];
  public myLabelsArray: Label[];
  public barChartLabels: Label[];
  constructor(private barchartservice: BarChartService) {}

  ngOnInit() {
    // WITH API CALL AND OBSERVABLE
    this.barchartservice.getBarChartData().subscribe(res => {
      console.log(res);
      this.parentChartData = res;
    });
  }
}

мой сервисный файл: 

import { Injectable } from "@angular/core";
import { ChartOptions, ChartType, ChartDataSets } from "chart.js";
import * as pluginDataLabels from "chartjs-plugin-datalabels";
import { Label } from "ng2-charts";
import { HttpClient } from "@angular/common/http";
import { BarChart } from "../model/bar-chart";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";

@Injectable({
  providedIn: "root"
})
export class BarChartService {
  public barChartData: ChartDataSets[];
  public parentChartData: ChartDataSets[];
  public myLabelsArray: Label[];
  public barChartLabels: Label[];

  private _url: string = "../../assets/dummy-chart/bar-chart-two.json";

  constructor(private http: HttpClient) {}  

 getBarChartData(): Observable<any> {
    return this.http.get<any>(this._url);
  }  
}

мой файл json: 

[
  { "data": [14, 81], "label": "Male", "stack": "1" },
  { "data": [25, 72], "label": "Female", "stack": "1" }
]

Данные должны быть загружены из файла json и отражены в диаграмме. Пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 27 мая 2019

Привет, Биплоб, добро пожаловать в переполнение стека,

Так что в вашем вопросе объект json не имеет правильной структуры.Я использую нечто подобное в своем приложении.

Изначально для правильной структуры создайте интерфейс, который определяет эту структуру, например: 

export interface IChartDataConfiguration {
    type:string;
    options:any;
    data: any;
    labels: any[];
    legend: boolean;
}

Затем определите свойство в компоненте 'class 

barChartData: IChartDataConfiguration;

Попробуйте использовать объект json с этой структурой 

{
        "type": "bar",
        "options": {
            "responsive": true,
            "scales": { "xAxes": [{}], "yAxes": [{}] },
            "plugins": {
              "datalabels": {
                "anchor": "end",
                "align": "end"
              }
            }
          },
          "data": [
            { "data": [65, 59, 80, 81, 56, 55, 40], "label": "Series A" },
            { "data": [28, 48, 40, 19, 86, 27, 90], "label": "Series B" }
          ],



          "labels":["2006", "2007", "2008", "2009", "2010", "2011", "2012"],
          "legend": true
    }

Итак, получите json с этой структурой, а затем назначьте его в член вашего класса компонентов, а затем в шаблон: 

            <canvas baseChart
                  height="60%"
                  [datasets]="yourComponentProperty"
                  [labels]="barChartData.labels"
                  [options]="barChartData.options"
                  [legend]="barChartData.legend"
                  [chartType]="barChartData.type">
                </canvas>

Надеюсь, это поможет.

...