javascript - 在隐藏的 DIV 上渲染 Chartjs

Question

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

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

这是我的示例 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;">

与

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

它会起作用:https://jsfiddle.net/FGRibreau/n1cx9d70/2/ :)

PS:如果您需要在服务器端渲染图表(例如批量)以便将其嵌入到 PDF 报告中，那么您可能需要考虑专用服务，例如 Image-Charts .