javascript - 更改 Node js 上 ChartJS 的背景

Question

我有以下简单代码在 node.js 上运行良好:

var express = require('express');
var Canvas = require('canvas');
var Chart = require('nchart');

var app = express();

app.get('/', function (req, res) {
    var canvas = new Canvas(400, 200);
    var ctx = canvas.getContext('2d');

    var data = {
    labels: ["January", "February", "March", "April"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(0,0,0,0)", //transparent
            strokeColor: "#f15a42",
            pointColor: "#f15a42",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [5, 9, 8, 1]
        }
    ]
    };

    var myChart = new Chart(ctx).Line(data, {});
    res.setHeader('Content-Type', 'image/png');
    canvas.pngStream().pipe(res);
});

var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;

  console.log('app listening at http://%s:%s', host, port);
});

它会生成以下 PNG 图像:

它有一个透明的背景。 我可以更改整个 Canvas 的背景(我希望它为纯白色)，直到我将图表添加到其中。它应该是 ChartJS 的功能，但我找不到任何东西。

如果我有 HTML Canvas ，我就能做到这一点，但不知道如何继续处理 Node 。

Answer 1

只需扩展 Chart.js 即可做到这一点，就像这样

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var ctx = this.chart.ctx;
        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = 'rgba(0,0,255,0.2)';
        ctx.fillRect(0, 0, this.chart.width, this.chart.height);
        ctx.globalCompositeOperation = 'source-over';
    }
});

然后

...
new Chart(ctx).LineAlt(data);

---

fiddle - http://jsfiddle.net/q7v5qzzg/