更改节点js上ChartJS的背景

我有以下简单的代码在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的背景（我希望它是纯白色的），直到我添加图表为止。 它应该是一个ChartJSfunction，但我什么也找不到。

我可以做到这一点，如果我有一个HTMLcanvas，不知道如何进行节点。

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); 

---

小提琴 – http://jsfiddle.net/q7v5qzzg/

Answer 2

scaleGridLineColor：“rgba（0,0,0,0）”

通过这个作为configuration值之一