Chart.js 画布在 node.js 中为空/白色答案

【问题标题】：Chart.js canvas is empty / white in node.jsChart.js 画布在 node.js 中为空/白色
【发布时间】：2018-06-13 22:23:42
【问题描述】：

我在节点中使用带有 JSDOM 的 Chart.js 时遇到了一些问题。

我不认为它是 JSDOM，因为我可以在画布上绘制并且渲染得很好。所以我怀疑 Chart.js 或我对它的使用有问题。

我在 github 上也有这个 https://github.com/jacktuck/node-chartjs，当它运行时，它会自动打开 test.png 文件，感谢 opn

使用 Chart.js 渲染的画布

如您所见，尽管从画布上的 toBlob 调用返回了一些数据，但它似乎没有呈现任何内容。

随机绘制的画布

var fs = require('fs')
var jsdom = require('jsdom')
var Canvas = require('canvas-prebuilt')
var pify = require('pify')
var config = require('./config')
var opn = require('opn')

var env = pify(jsdom.env) // promisify env

;(async function (exports) {
  var chart = 'https://cdn.jsdelivr.net/npm/chart.js@2.4/dist/Chart.min.js'

  var html = `<html>
    <body>
      <div id='chart-div' style='font-size:12; width:400; height:400;'>
        <canvas id='myChart' width=400 height=400></canvas>
      </div>
    </body>

  </html>`

  try {
    var window = await env(html, [chart], {
      features: {
        FetchExternalResources: ['script'],
        ProcessExternalResources: ['script'],
        SkipExternalResources: false
      }
    })

    window.CanvasRenderingContext2D = Canvas.Context2d

    config.options.responsive = false
    config.animation = false
    config.width = 400
    config.height = 400

    // console.log('canvas', _canvas)
    // console.log('ctx', _ctx)
    console.log('window.Chart', window.Chart)

    const _canvas = window.document.getElementById('myChart')
    const _ctx = _canvas.getContext('2d')

    // If I just draw a circle it is rendered fine
    // _ctx.beginPath()
    // _ctx.arc(95,50,40,0,2*Math.PI)
    // _ctx.stroke()

    new window.Chart(_ctx, config)

    _canvas.toBlob(function (blob, err) {
      console.log('ERR', err)
      var out = fs.createWriteStream(__dirname + '/test.png')
      out.write(jsdom.blobToBuffer(blob))

      opn('file://' + __dirname + '/test.png')
    }, 'image/png')
  } catch (e) {
    console.log('ERR', e)
  }
})(module.exports)

【问题讨论】：

标签： javascript node.js canvas chart.js

【解决方案1】：

我不太记得我在这里遇到的问题是什么，但我不再遇到了。如果我没记错的话，chart.js 版本的更改解决了它。 https://github.com/jacktuck/node-chartjs 现在可以正常工作了。

【讨论】：