使用bot框架和Vega库在聊天机器人中显示图表

我正在使用Microsoft Bot Framework和Vega库构build数据可视化机器人。 我遵循github中的代码 。 谁能告诉我我的代码有什么问题？

但是，当我运行我的代码时出现错误：

/ - waterfall() step 1 of 1 / - Session.send() (node:11934) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Cannot read property 'getContext' of null / - Session.sendBatch() sending 1 message(s) 

这是我的代码：

 var sendVega = require('./botbuilder-vega'); // skip the setup server & create session process function sendVegaChart(session){ var chart = require('./test.vg.json'); sendVega(session, "my chart", chart); } 

botbuilder-vega.js

 var vega = require('vega'); var builder = require('botbuilder'); module.exports = function (session, messageText, vegaSpec) { var view = new vega .View(vega.parse(vegaSpec)) .renderer('none') .initialize(); view .toCanvas() .then(function (canvas) { var pngString = canvas .toBuffer() .toString('base64') var message = new builder .Message(session) .text(messageText); message.addAttachment({ contentType: 'image/png', contentUrl: 'data:image/png;base64,' + pngString, name: 'Chart name' }); // send message with attached image stream session.send(message); }) } // END OF LINE 

我的json文件看起来像这样 – test.vg.json：

 { "$schema": "https://vega.github.io/schema/vega/v3.0.json", "width": 500, "height": 200, "padding": 5, "data": [ { "name": "table", "values": [ {"x": 0, "y": 28, "c":0}, {"x": 0, "y": 55, "c":1}, {"x": 1, "y": 43, "c":0}, {"x": 1, "y": 91, "c":1}, {"x": 2, "y": 81, "c":0}, {"x": 2, "y": 53, "c":1}, {"x": 3, "y": 19, "c":0}, {"x": 3, "y": 87, "c":1}, {"x": 4, "y": 52, "c":0}, {"x": 4, "y": 48, "c":1}, {"x": 5, "y": 24, "c":0}, {"x": 5, "y": 49, "c":1}, {"x": 6, "y": 87, "c":0}, {"x": 6, "y": 66, "c":1}, {"x": 7, "y": 17, "c":0}, {"x": 7, "y": 27, "c":1}, {"x": 8, "y": 68, "c":0}, {"x": 8, "y": 16, "c":1}, {"x": 9, "y": 49, "c":0}, {"x": 9, "y": 15, "c":1} ], "transform": [ { "type": "stack", "groupby": ["x"], "sort": {"field": "c"}, "field": "y" } ] } ], "scales": [ { "name": "x", "type": "band", "range": "width", "domain": {"data": "table", "field": "x"} }, { "name": "y", "type": "linear", "range": "height", "nice": true, "zero": true, "domain": {"data": "table", "field": "y1"} }, { "name": "color", "type": "ordinal", "range": "category", "domain": {"data": "table", "field": "c"} } ], "axes": [ {"orient": "bottom", "scale": "x", "zindex": 1}, {"orient": "left", "scale": "y", "zindex": 1} ], "marks": [ { "type": "rect", "from": {"data": "table"}, "encode": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": 1, "offset": -1}, "y": {"scale": "y", "field": "y0"}, "y2": {"scale": "y", "field": "y1"}, "fill": {"scale": "color", "field": "c"} }, "update": { "fillOpacity": {"value": 1} }, "hover": { "fillOpacity": {"value": 0.5} } } } ] }