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

时间：2018-01-31 17:11:56

标签： javascript node.js canvas chart.js

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

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

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

使用Chart.js

渲染画布

正如您所看到的，尽管画布上的toBlob调用返回了一些数据，但看起来没有渲染。 enter image description here

绘制了随机圆圈的渲染画布

enter image description here 

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)

1 个答案:

答案 0 :(得分：0)

我不记得我在这里遇到的问题是什么，但我不再拥有它。如果我记得正确的chart.js版本更改解决它。 https://github.com/jacktuck/node-chartjs现在按预期工作。

相关问题
最新问题