在节点js上更改ChartJS的背景

时间:2016-01-27 08:58:23

标签: javascript node.js chart.js

我在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图像:

chart

它具有透明背景。 我可以改变整个画布的背景(我希望它是纯白色),直到我将图表添加到它。它应该是ChartJS功能,但我找不到任何东西。

如果我有一个HTML画布,我就能做到这一点,不知道如何继续使用节点。

2 个答案:

答案 0 :(得分:2)

只需扩展Chart.js就可以了,就像这样

Count

然后

codec

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

答案 1 :(得分:0)

scaleGridLineColor:" rgba(0,0,0,0)"

将其作为配置值

之一传递