将动态图表js导出到jspdf

Question

我在使用以下代码时遇到问题：

var reportPageHeight = 16500;
var reportPageWidth = 12400;

// create a new canvas object that we will populate with all other canvas objects
var pdfCanvas = $('<canvas />').attr({
    id: "pcanvaspdf",
    width: reportPageWidth,
    height: reportPageHeight
});

// keep track canvas position
var pdfctx = $(pdfCanvas)[0].getContext('2d');
var pdfctxX = 0;
var pdfctxY = 0;
var buffer = 100;

// for each chart.js chart
$("canvas").each(function (index) {
    // get the chart height/width
    var canvasHeight = 4000
    var canvasWidth = 6500;

    

    // draw the chart into the new canvas
        pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);

    pdfctxX += canvasWidth + buffer;

    // our report page is in a grid pattern so replicate that in the new canvas
    if (index % 2 === 1) {
        pdfctxX = 0;
        pdfctxY += canvasHeight + buffer;
    }
});

// download the pdf
pdf.save('ChartPDF.pdf');

问题是当图表导出到 PDF 时，我失去了图表的透明度，取而代之的是黑色背景。导出到 PDF 时，有没有办法将其更改为白色？

提前致谢。

Answer 1

将 canvas 背景设置为白色：

canvas {
  background-color: #fff;
}

如果这不起作用，请在图表的plugins object 中绘制 canvas 背景：

plugins: [
  {
    id: 'background',
    beforeDraw: function(chartInstance) {
      var chart = chartInstance.chart;
      var ctx = chart.ctx;
      ctx.fillStyle = backgroundColor;
      ctx.fillRect(0, 0, chart.width, chart.height);
    }
  }
],