Angular 8: рисование двух гистограмм в ng2-диаграммах, не работающих с разными наборами данных - PullRequest
Новая
       6

Angular 8: рисование двух гистограмм в ng2-диаграммах, не работающих с разными наборами данных

0 голосов
/ 07 января 2020

Я пытался нарисовать две диаграммы на одной странице, используя приведенный ниже код в HTTP 

<div class="chk-block-content">
    <canvas height="100"width="500" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType"></canvas>

</div>

 <div class="chk-block-content">
    <canvas height="100"width="500" baseChart [datasets]="barChartData2" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="bar"></canvas>
</div>

в двух разных блоках, однако единственный набор данных, который рисуется на экране, это barChartData one Я определил их так в моем компоненте ts 

 public barChartdata2: any[]=[
      {data: [10], label: 'Series A'},
      {data: [10], label: 'Series B'}
   ]
   public barChartLabels:string[] = [ 'Enero', 


 'Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
   public barChartType:string = 'bar';
   public barChartLegend:boolean = false;
   public barChartData:any[] = [
     {data: [6500, 590, 800, 810, 560, 550, 400], label: 'Series A'},
     {data: [2800, 480, 400, 190, 860, 207, 900], label: 'Series B'}
   ];

Почему barChartData только рисуется?

Можно ли мне визуализировать оба набора данных?

1 Ответ

1 голос
/ 07 января 2020

Несколько вещей:

  • в вашем файле TS, имя переменной равно barChartdata2, а переменная, указанная на 2-й диаграмме, равна barChartData2 (заглавная D)
  • тип диаграммы bar в вашем HTML должен быть barChartType

релевантным HTML: 

<div class="chk-block-content">
    <canvas height="100"width="500" baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType"></canvas>
</div>

 <div class="chk-block-content">
    <canvas height="100"width="500" baseChart [datasets]="barChartData2" [labels]="barChartLabels" [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend" [chartType]="barChartType"></canvas>
</div>

релевантным TS файл: 

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

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
public barChartData2: any[]=[
      {data: [10], label: 'Series A'},
      {data: [10], label: 'Series B'}
  /*
     {data: [6500, 590, 800, 810, 560, 550, 400], label: 'Series A'},
     {data: [2800, 480, 400, 190, 860, 207, 900], label: 'Series B'}
   */
   ];
   public barChartLabels:string[] = [ 'Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
   public barChartType:string = 'bar';
   public barChartLegend:boolean = false;
   public barChartData:any[] = [
     {data: [6500, 590, 800, 810, 560, 550, 400], label: 'Series A'},
     {data: [2800, 480, 400, 190, 860, 207, 900], label: 'Series B'}
   ];
  constructor() {  }
  ngOnInit() {}
}

рабочий стек * блиц здесь

...