依賴安裝

1.由于Apple從OSX 10.5開始移除了X11的支持，為了繼續(xù)運(yùn)行X11程序，Apple搞了一個(gè)開源項(xiàng)目XQuartz來繼續(xù)提供X11的支持。從官方網(wǎng)站https://xquartz.macosforge.org下載，安裝即可
2.裝完XQuartz，運(yùn)行：
$ brew install cairo
3.環(huán)境變量PKG_CONFIG_PATH沒有正確設(shè)置。把它設(shè)置成如下：
$ export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig:/opt/X11/lib/pkgconfig
4.安裝npm install canvas

餅圖示例：

var fs = require('fs');
var path = require('path');
var Canvas = require('canvas');
// 餅圖需要自定義的參數(shù)
var pieArgument = {
  canvasWidth: 210,
  canvasHeight: 128,
  sum: 3456,
  item: 1234,
  fillColor: "#3ebbc1",
  bgColor: '#e6e6e6',
  fontColor: '#3ebbc1'
};
// 餅圖 方法定義
function pie (pieArgument) {
  var percent = pieArgument.item/pieArgument.sum;
  var pieLable = (percent * 100).toString().substring(0,5);
  if ((percent * 100).toString().substring(5, 6) >= 5) {
    var aa = (Number(pieLable.substring(4,5)) + 1).toString();
    var bb = pieLable.split('');
    bb.splice(4,1,aa);
    pieLable = bb.join('') + '%';
  } else {
    pieLable = pieLable * 100 + '%';
  }
  var radian = Math.PI/180*360*percent - Math.PI*0.5;
  var canvas = new Canvas(pieArgument.canvasWidth, pieArgument.canvasHeight);
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.translate(pieArgument.canvasHeight/2,pieArgument.canvasHeight/2);//定義中心點(diǎn)
  ctx.moveTo(0,0);
  ctx.arc(0,0,pieArgument.canvasHeight/2,0,Math.PI*2,false);
  ctx.fillStyle=pieArgument.bgColor;
  ctx.fill();
  ctx.moveTo(0,0);
  ctx.arc(0,0,pieArgument.canvasHeight/2,Math.PI*1.5,radian,true);
  ctx.fillStyle=pieArgument.fillColor;
  ctx.fill();

  ctx.translate(pieArgument.canvasWidth/2,0);//定義中心點(diǎn)
  ctx.font = '20px 蘋方-簡';
  ctx.textAlign = "center";
  ctx.textBaseline = 'middle';
  ctx.fillStyle=pieArgument.fontColor;
  ctx.fillText(pieLable, 0,0);

  ctx.closePath();
  console.log(canvas.toDataURL());//生成圖片base64
  canvas.createPNGStream().pipe(fs.createWriteStream(path.join(__dirname, 'pie.png'))) // 生成本地圖片(指定文件名)
}
pie(pieArgument);
效果圖

1501749330466-c7d16b92-2619-4baa-9bd4-92fe5168f11d-image.png