在隐藏的DIV上呈现Chartjs

Question

我正在尝试在隐藏的div上使用chart.js渲染许多图表，然后将它们转换为图像以在PDF报告中使用。

我的问题是：如果图表未在DOM上呈现，则无法捕获它并将其绘制在canvas上。在显示图表之前，它不会呈现。我尝试使用draw中的render和chart.js的方法，但是它们无法产生所需的结果。

这是我的示例HTML：

<div style="display: none;">
  <canvas id="myChart"></canvas>
</div>

以及我相应的JavaScript：

var canvas: any = document.getElementById('myChart');
var ctx: any = canvas.getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',
    // The data for our dataset
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
          }]
        },

        // Configuration options go here
        options: {}
      });

for (var id in Chart.instances) {
    Chart.instances[id].resize();
    Chart.instances[id].draw('1s');
    Chart.instances[id].render('1s');
    console.log(Chart.instances[id].toBase64Image());
}

有什么方法可以手动呈现图表而不显示它，然后将输出捕获为图像？

Answer 1

最快的破解方法是替换：

<div style="display: none;">

with

<div style="position:absolute;left:-9999px;top:-9999p">

它将起作用：https://jsfiddle.net/FGRibreau/n1cx9d70/2/：）

PS：如果需要在服务器端呈现图表（例如，以批处理的形式），然后将其嵌入PDF报表中，则可能需要考虑使用Image-Charts之类的专用服务。