Я уже несколько недель работаю над ботом Discord, который в основном собирает статистику на сервере и выводит шаблоны. Чтобы улучшить его, я хотел заставить его генерировать графики как PNG, чтобы отправлять их обратно пользователю - короче говоря, без DOM. Для этого я использую vega (версия 5.10.1 - последняя) и node-canvas (версия 2.6.1 - последняя) с nodejs v12.16.1.
Я рыскал по сети в поисках помощи по использованию веги и нашел пару противоречащих друг другу источников. Я использовал приведенный здесь пример кода: https://vega.github.io/vega/usage/
Дело в том, что я все время получаю эту ошибку:
TypeError: Cannot read property 'getContext' of null
message:"Cannot read property 'getContext' of null"
stack:"TypeError: Cannot read property 'getContext' of null
at resize (e:\DEV\GIT REPOS\GITHUB\PERSO\JS\test-StatBot\node_modules\vega-scenegraph\build\vega-scenegraph.js:3665:28)
at CanvasRenderer.prototype$6.resize (e:\DEV\GIT REPOS\GITHUB\PERSO\JS\test-StatBot\node_modules\vega-scenegraph\build\vega-scenegraph.js:3714:5)
at CanvasRenderer.prototype$4.initialize (e:\DEV\GIT REPOS\GITHUB\PERSO\JS\test-StatBot\node_modules\vega-scenegraph\build\vega-scenegraph.js:3294:17)
at CanvasRenderer.prototype$6.initialize (e:\DEV\GIT REPOS\GITHUB\PERSO\JS\test-StatBot\node_modules\vega-scenegraph\build\vega-scenegraph.js:3709:28)
at initializeRenderer (e:\DEV\GIT REPOS\GITHUB\PERSO\JS\test-StatBot\node_modules\vega-view\build\vega-view.js:657:8)
at renderHeadless (e:\DEV\GIT REPOS\GITHUB\PERSO\JS\test-StatBot\node_modules\vega-view\build\vega-view.js:780:12)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async View.renderToCanvas [as toCanvas] (e:\DEV\GIT REPOS\GITHUB\P...
Вот код, который вызывает у меня проблемы:
// Imports
const vega = require('vega');
// Render image from given graph spec (statsObject)
async function graphToImage (statsObject) {
graphObject = new vega.View(vega.parse(statsObject), { renderer: 'none'});
const pngName = generateFileName(10);
removeExistingFile(pngName);
graphObject.toCanvas().then(canvas => {
console.log('Writing PNG to file...');
writeFile(`../../../../generated/${pngName}.png`, canvas.toBuffer());
}).catch(err => {
console.log("Error writing PNG to file:");
console.error(err);
});
return pngName;
}
Я действительно не знаю, как работают Canvas или Vega, поэтому я понятия не имею, что может вызывать эту проблему и как ее исправить ... Однако проблема, похоже, находится внутри метода toCanvas()
. Любая помощь высоко ценится !
Заранее спасибо !