javascript - Changing the background of a ChartJS on node js -
i have following simple code running fine on 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 @ http://%s:%s', host, port); }); it produces following png image:
it has transparent background. i'm able change background of whole canvas (i want solid white) until add chart it. should chartjs feature not find anything.
i'd able if had html canvas, not sure how proceed node.
just extend chart.js this, so
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'; } }); and then
... new chart(ctx).linealt(data); fiddle - http://jsfiddle.net/q7v5qzzg/
Comments
Post a Comment