Question

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

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

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

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,
    }]
    }

我得到一个很好的pdf，其中一张图表目前已经打开。该图表呈现为OnInit，如下所示：

<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>

其他图表显然在打开其标签时呈现（onClick）。我尝试将它们手动渲染到DOM中，通过调用它们的方法就像上面那样，并且通过调用Chart.js APi渲染menthod也可以加载，但是我得到了一个错误。它们根本就不存在，数据URL是空的！

但是，如果您至少打开一次标签并返回上一个标签，则会显示数据网址。有没有人知道如何以编程方式解决这个问题所以你只需点击一个按钮就可以呈现所有图表而无需将它们全部放在一个页面上。谢谢。

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

如何渲染Chart.js base64Image而不在Angular中绘制图表

0 个答案: