向下钻取图表动态功能答案

【问题标题】：Drill down charts dynamic functionality向下钻取图表动态功能
【发布时间】：2019-09-11 20:02:00
【问题描述】：

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

在 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，以 null 的形式出现。你能告诉我上面的代码有什么问题吗？

【问题讨论】：

标签： angular chart.js

【解决方案1】：

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

【讨论】：

iam 也在寻找相同的行为，但使用静态数据。你能把工作代码发给我吗