在隐藏 DIV 上呈现 Chartjs

Question

我正在尝试在隐藏的 div 上使用 chart.js 渲染许多图表，然后将它们转换为图像以用于 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 这样的专用服务.

在隐藏 DIV 上呈现 Chartjs

Render Chartjs on hidden DIV

javascript

charts

chart.js

chartjs-2.6.0