IssueHuntantvis/G2
The issue has been closed
SSR (Server-Side Rendering & Canvas) #5641
JonasJonny posted onGitHub
G2 Version: "@antv/g2": "^5.1.5",
Good evening, I wanted to try SSR with Canvas but without luck. I followed test code
function createNodeGCanvas(width, height) {
// Create a node-canvas instead of HTMLCanvasElement
const nodeCanvas = createCanvas(width, height);
// A standalone offscreen canvas for text metrics
const offscreenNodeCanvas = createCanvas(1, 1);
// Create a renderer, unregister plugin relative to DOM.
const renderer = new Renderer();
// Remove html plugin to ssr.
const htmlRendererPlugin = renderer.getPlugin('html-renderer');
renderer.unregisterPlugin(htmlRendererPlugin);
const domInteractionPlugin = renderer.getPlugin('dom-interaction');
renderer.unregisterPlugin(domInteractionPlugin);
renderer.registerPlugin(
new DragAndDropPlugin.Plugin({ dragstartDistanceThreshold: 10 }),
);
return new Canvas({
width,
height,
canvas: nodeCanvas,
renderer,
offscreenCanvas: offscreenNodeCanvas,
});
}
async function renderG2BySSR() {
const width = 600;
const height = 400;
const gCanvas = createNodeGCanvas(width, height);
// A tabular data to be visualized.
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
];
const chart = new Chart({
width,
height,
canvas: gCanvas,
createCanvas: () => {
return createCanvas(width, height);
},
});
chart
.interval()
.data(data)
.encode('x', 'genre')
.encode('y', 'sold')
.encode('color', 'genre');
await chart.render();
}from https://github.com/antvis/G2/blob/10a4b51e65fe58c68105118736a65870acc91550/__tests__/unit/ssr/index.spec.ts but receiving
ReferenceError: document is not defined
at normalizeContainer (/***/node_modules/@antv/g2/lib/api/src/api/utils.ts:40:23)I tried await canvas.ready; as https://github.com/antvis/G/blob/next/__tests__/integration/__node__tests__/canvas/text.spec.js#L39 with the same result :(.
I want to export chart to PDF for report purpose and I need to somehow get the canvas/SVG code on server.