我有一个问题，我正在考虑如何解决 . 我有三个引导选项卡，每个选项卡上都有一个图表通过Chart.js呈现 .

我希望用户可以通过按钮点击加载页面后导出所有图表 .

一个选项卡一切正常 . 像这样：

var canvasEquity = document.getElementById("myChart") as HTMLCanvasElement;
var imgEquity    = canvasEquity.toDataURL("image/png");
var iframe = "<iframe 
               width='100%' height='100%' 
               src='" + imgEquity + "'>
               </iframe>"

pdfMake.vfs = pdfFonts.pdfMake.vfs;

var pdfDocument = {
content: [ 
  {
    image: imgEquity,
    width: 350,
    height: 200
  }
]};

pdfMake.createPdf(pdfDocument).open();

我得到一个很好的PDF文件，其中一个图表目前是打开的 . 该图表呈现为OnInit，如下所示：

renderChart() {

if (this.myChart) 
  this.myChart.destroy();

var ctx = document.getElementById("myChart");

this.myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels :this.equityDates,
    datasets: [{
      label: 'Closed Equity',
      data: this.equity,
    }]
    }

打开其选项卡时，其他图表显然会被渲染（onClick） . 我尝试将它们手动渲染到DOM中，通过调用它们的方法就像上面那样，并通过调用Chart.js APi渲染menthod加载，但是我得到一个错误 . 他们根本不在那里，数据网址是空的！

但是，如果您至少打开一次选项卡并返回上一个选项卡，则会显示数据URL . 有没有人知道如何以编程方式解决这个问题，因此您只需单击一个按钮即可呈现所有图表，而无需将它们全部放在一个页面上 . 谢谢 .

这里也是选项卡代码的bootstrap部分的示例 .

<div>
 <ul class="nav nav-tabs">

<li class="active">
<a data-toggle="tab" href="#equity">Equity</a>
</li>

<li (click)="renderChartDD()">
<a data-toggle="tab" href="#dd">Drawdowns</a>
</li>

 <li (click)="renderMonthlyRevChart()" >
 <a data-toggle="tab" href="#monthlyEquity">Monthly Revenue</a>
 </li>

</div>



              <div class="tab-content">

                <div id="equity" class="tab-pane active">                      
                      <canvas id="myChart"></canvas>                    
                </div>

                <div id="dd" class="tab-pane">
                    <canvas id="myChartDD"></canvas>
                </div>

                <div id="monthlyEquity" class="tab-pane">
                    <canvas id="myChartMonthlyEquity"></canvas>
                </div>

               </div>
angular chart.js pdfmake