2016-01-27 3 views
1

расслоения плотного я следующий простой код работает штраф на Node.js:Изменение фоне ChartJS на узел

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

Просто продлить 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/

+0

Спасибо, это работает, но я не уверен, почему: не могли бы вы немного объяснить? – koichirose

+0

Несомненно. globalCompositeOperation - свойство canvas context, которое определяет, как новые фигуры будут включены в растровое изображение canvas. Значение по умолчанию (source-over) просто рисует новую фигуру поверх всех существующих фигур. destination-over - это противоположность тому, что он рисует новую форму под всеми существующими формами - это то, что мы делаем, - мы заполняем холст нашим цветом заливки в соответствии с существующей диаграммой. Подробнее см. Https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation. Ура! – potatopeelings

+0

получил, спасибо! – koichirose

0

scaleGridLineColor: "RGBA (0,0,0,0)"

проходят это как один из конфигурации значений

+0

из документации, которая должна быть цвет линий сетки: // Строка - цвет линий сетки scaleGridLineColor: "RGBA (0,0,0, +0,05)", – koichirose

Смежные вопросы