时间戳

首页 > 解决方案 > 向下钻取图表动态功能

angular - 向下钻取图表动态功能

问题描述

我在打字稿代码中为画布元素获取空值。有一个静态饼图，点击它后，向下钻取到它的子饼图。

在 onclick 功能中，我使用 *ngIf 隐藏父级并显示子级。子图表未显示。

html代码：

<div>
        <canvas *ngFor="let chart of charts; let i = index" id="canvas{{i}}" #mycanvas></canvas>
    </div>

输入脚本代码：

@ViewChildren("mycanvas") divView: ElementRef;
  array = [];
  ngAfterViewInit(): void {
    this.createCharts(this.array);
  }
  charts = [];
  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    this.createChartsData();
  }

  createChartsData() {


    for (var i = 0; i < 3; i++) {
        var pie = {
            type: 'pie',
            data: {
                labels: ["Disks", "Mgmt", "Hardware", "FC", "Vols&Pols"],
                datasets: [{
                    backgroundColor: ["#008000", "#008000", "#008000", "#008000", "#008000"],
                    data: [20, 20, 20, 20, 20]
                }]
            },
            options: {
                title: { display: false },
                animations: true,
                tooltips: { enabled: true },
                legend: { display: true }
            }
        };
        this.array.push(pie);
    }


}
 createCharts(pieData) {
console.log(this.elementRef);
console.log(this.divView+" 777777777dfd");
var ctx: CanvasRenderingContext2D = this.divView.nativeElement.getContext("2d");
    for (var j = 0; j < 3; j++) {
        /* let htmlRef = this.divView.nativeElement.select(`canvas` + j);
        console.log(htmlRef);
        var tempChart = new Chart(htmlRef, pieData[j]);
        this.charts.push(tempChart); */
    }
}

this.divView，即将为空。你能告诉我上面的代码有什么问题吗？

标签： angularchart.js

解决方案

在发布的同一天发现问题。抱歉回复晚了。问题是我正在为画布使用图表数组来迭代和创建画布。画布数组使用画布模板变量，有点死锁。所以我总是得到未定义的画布的元素参考。修好了。让我知道是否有人需要其他代码，我可以发布它。

推荐阅读