无法在弹出窗口中克隆Chart.js图表

Question

我正在尝试在弹出窗口中显示全角图形，但是它将呈现一个空的弹出窗口。该代码是使用Angular，TypeScript，Bootstrap和Chart.js编写的。HTML代码

<div class="col-lg-5" style="margin-right: 10px;">
      <img
        src="../../assets/images/popup-icon.jpg"
        data-toggle="modal"
        data-target=".bd-example-modal-xl"
        class="img-fluid"
        height="40px"
        width="40px"
        id="clone">
      <canvas height="280px" style="padding-right: 22px;" id="amplitudeChart">{{apmlitudeChart}}
      </canvas>
</div>
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="col-md-12">
        <canvas id="largeAmplitudeChart">{{apmlitudeChart}}
        </canvas>
      </div>
    </div>
  </div>
</div>

打字稿代码

import { Chart } from 'chart.js';

export class ChartsComponent implements OnInit {
apmlitudeChart: Chart;

ngOnInit() {
    this.apmlitudeChart = new Chart('amplitudeChart', {
      type: 'bar',
      data: {
        labels: ['1', '2', '3', '4', '5', '6', '7'],
        datasets: [
          {
            label: 'AMPLITUDE',
            data: [43, 53, 46, 34, 65, 34, 98],
            backgroundColor: '#47ECBB',

            fill: true
          }
        ]
      },
      options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
      }
    });
}

[请帮我弄清楚如何使用Angular，ChartsJS和Typescript在弹出窗口中显示相同的图形。并且，如果有关于在Angular中使用ChartJS的详尽解释的教程，请与我分享。谢谢

Answer 1

您可以使用JavaScript实现：工作样本：https://stackblitz.com/edit/angular-playground-i6sycz?file=app/hello-framework/hello-framework.component.ts

openChart(){
  var canvas = <HTMLCanvasElement>document.getElementById("amplitudeChart");
  let canvasClone = this.cloneCanvas(canvas);
  console.log(canvasClone)
  var myWindow = window.open();
  myWindow.document.body.appendChild(canvasClone);
}

cloneCanvas(oldCanvas) {

    //create a new canvas
    var newCanvas = document.createElement('canvas');
    var context = newCanvas.getContext('2d');

    //set dimensions
    newCanvas.width = oldCanvas.width;
    newCanvas.height = oldCanvas.height;

    //apply the old canvas to the new one
    context.drawImage(oldCanvas, 0, 0);

    //return the new canvas
    return newCanvas;
}