Question

我有一个构建堆积的条形图的组件，我需要在其他页面上用不同的数据调用两次。在我尝试执行此操作时，两个图表都已渲染，但它们相互重叠。

图表组件html文件类似

    <mat-card >
        <mat-card-header>
            <mat-card-title>
                <mat-icon class="iconText">developer_board</mat-icon>
                <b class="iconText">{{title}}</b>
            </mat-card-title>
        </mat-card-header>
        <mat-card-content class="ch">
               <canvas id="myChart" width="500" height="400"></canvas>
                <!-- <svg width="400" height="300"></svg> -->
        </mat-card-content>
    </mat-card>

我的component.ts文件是

var chartEle=(<HTMLCanvasElement>document.getElementById("myChart")).getContext("2d")
  this.chart = new Chart(chartEle, {
    type: 'bar',
    data: this.formatInputDataToChartData(), //function to generate dataset
    options: {
      scales: {
        xAxes: [{ stacked: true }],
        yAxes: [{ stacked: true }]
      }
    }
  });

父组件看起来像

<div fxLayout="row"  fxLayoutGap="10px">
    <div fxFlex="50">
        <app-bar-chart [data]="appBarChartData" [title]="appChartTitle"></app-bar-chart>
    </div>
    <div fxFlex="50" >
        <app-bar-chart [data]="dbBarChartData"  [title]="dbChartTitle"></app-bar-chart>
    </div>
</div>

谢谢！

Answer 1

请勿使用：

var chartEle=(<HTMLCanvasElement>document.getElementById("myChart")).getContext("2d")

只需在组件模板中定义一个画布，然后使用@ViewChild即可获取对其的引用：

@Component({
  selector: 'app-bar-chart',
  template: `
    <div>
      <canvas style="width: 100%; height: 400px;" #canvas id="canvas"></canvas>
    </div>`,
})

@ViewChild('canvas') canvasRef: ElementRef;
this.ctx = this.canvasRef.nativeElement.getContext('2d');

this.chart = new Chart(this.ctx, {...

在页面中两次渲染一次chart.js组件

1 个答案: