如果你想要一个自定义的背景颜色，你必须用你喜欢的颜色来画一个背景，你可以这样做，就像这样...

var backgroundColor = 'white';
Chart.plugins.register({
    beforeDraw: function(c) {
        var ctx = c.chart.ctx;
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
    }
});

• • 演示**

x一个一个一个一个x一个一个二个x

正如我在对已接受答案的评论中所述，beforeDraw事件导致fillRect代码被多次调用（就我所见，每个数据点调用一次），这让我很困扰。
但是当在任何其他事件上调用时，我无法让这种方法工作，然而，我只是采用了in this answer描述的编码方法，并将其插入到注册为在afterRender事件上运行的代码中，它就完成了我想要的工作：运行一次，背景为白色。

Chart.plugins.register({
    afterRender: function(c) {
        console.log("afterRender called");
        var ctx = c.chart.ctx;
        ctx.save();
        // This line is apparently essential to getting the
        // fill to go behind the drawn graph, not on top of it.
        // Technique is taken from:
        // https://stackoverflow.com/a/50126796/165164
        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
        ctx.restore();
    }
});

请访问linked answer to the other posted question（并投赞成票）。

**在React中，使用react-chartjs-2，**我可以设置图表的背景颜色，如下所示：

const plugin = {
    beforeDraw: (chartCtx) => {
      const ctx = chartCtx.canvas.getContext('2d');
      ctx.save();
      ctx.globalCompositeOperation = 'destination-over';
      ctx.fillStyle = 'white';
      ctx.fillRect(0, 0, chartCtx.width, chartCtx.height);
      ctx.restore();
    }
};

然后将插件添加到图表中：

<Line ref={chartRef} data={chartData} options={options} plugins={[plugin]} />

参考文件

将图表保存为图像：

我创建了一个使用toBase 64 Image函数提取图像的函数。我将此函数附加到一个按钮上，以帮助我在单击按钮时下载图表图像。

function downloadImage(){
    const link = document.createElement("a");
    link.download = `${chart.name || 'chart'}.jpg`
    link.href = chartRef.current.toBase64Image('image/jpeg', 1);
    link.click();
  }