我的问题是我正在创建一个包含多个图表的应用。第一个工作正常,第二个工作正常,如果第一个没有(评论),但当我想要显示两者时,只有第一个显示结果,第二个只显示轴。
这是我的代码:
app.ts
import {Component, OnInit, ViewChild} from "@angular/core";
import { BaseChartDirective, ChartsModule } from 'ng2-charts';
import {DaterangepickerConfig} from "ng2-daterangepicker";
export class ProtectedComponent implements OnInit {
@ViewChild(BaseChartDirective) chart: BaseChartDirective;
@ViewChild(BaseChartDirective) chart2: BaseChartDirective;
...
this.barChartData1 = [
{data: this.vector1, label: 'Label 1', type:"bar"},
{data: this.vector2, label: 'Label 2', type:"bar"},
];
this.barChartLabels1 = this.barChartLabelsSelected1.slice(a - b);
setTimeout(() => {
if (this.chart && this.chart.chart && this.chart.chart.config) {
this.chart.chart.config.data.labels = this.barChartLabels1;
this.chart.chart.update();
}
});
this.barChartData2 = [
{data: this.vector3, label: 'Label 3', type:"bar"},
{data: this.vector4, label: 'Label 4', type:"bar"},
];
this.barChartLabels2 = this.barChartLabelsSelected2.slice(a - b);
setTimeout(() => {
if (this.chart2 && this.chart2.chart && this.chart2.chart.config) {
this.chart2.chart.config.data.labels = this.barChartLabels2;
this.chart2.chart.update();
}
});
}
app.html
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="portlet light ">
<div style="display: block">
<canvas baseChart
[datasets]="barChartData1"
[labels]="barChartLabels1"
[options]="barChartOptions"
[colors]="lineChartColors"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</div>
...
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="portlet light ">
<div style="display: block">
<canvas baseChart
[datasets]="barChartData2"
[labels]="barChartLabels2"
[options]="barChartOptions"
[colors]="lineChartColors"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
</div>
barChartData1和barChartData2以及barChartLabels1和barChartLabels2的值是正确的,我已经检查过了。如前所述,如果我在html中评论第一个图表,则第二个图表正确显示,如果两个图表都处于活动状态,则只显示第一个图表。