Question title
Can server-side rendering be used?
Problem description
Can server-side rendering be used? I want to provide a service to obtain chart images at the server level.
Solution
VChart supports Node server-side rendering. The drawing library VRender used by VChart supports Node environment rendering. In addition to VChart, you only need to install the canvas package at the server level.
Code example
const fs = require('fs');
const VChart = require('@visactor/vchart');
const Canvas = require('canvas');
// normal spec
const spec = {
type: 'radar',
data: [
{
id: 'Map',
values: [
{ key: 'North', value: 31, category: 'Destroyer' },
{ key: 'Northeast', value: 32, category: 'Destroyer' },
{ key: 'East', value: 21, category: 'Destroyer' },
{ key: 'Southeast', value: 15, category: 'Destroyer' },
{ key: 'South', value: 50, category: 'Destroyer' },
{ key: 'Southwest', value: 44, category: 'Destroyer' },
{ key: 'West', value: 32, category: 'Destroyer' },
{ key: 'Northwest', value: 32, category: 'Destroyer' },
{ key: 'North', value: 31, category: 'Destroyer' },
{ key: 'Northeast', value: 32, category: 'Destroyer' },
{ key: 'East', value: 21, category: 'Destroyer' },
{ key: 'Southeast', value: 40, category: 'aircraft carrier' },
{ key: 'South', value: 25, category: 'aircraft carrier' },
{ key: 'Southwest', value: 22, category: 'aircraft carrier' },
{ key: 'West', value: 18, category: 'aircraft carrier' },
{ key: 'Northwest', value: 7, category: 'aircraft carrier' },
{ key: 'North', value: 24, category: 'aircraft carrier' },
{ key: 'Northeast', value: 43, category: 'aircraft carrier' },
{ key: 'East', value: 42, category: 'aircraft carrier' }
]
}
],
categoryField: 'key',
valueField: 'value',
seriesField: 'category',
legends: {
visible: true,
orient: 'bottom'
}
};
const cs = new VChart.default(spec, {
// set mode to 'node'
mode: 'node',
modeParams: Canvas,
animation: false // close animation
});
cs.renderSync();
// export image
const buffer = cs.getImageBuffer();
fs.writeFileSync(`./chart.png`, buffer);
Results show
Demo: https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/node
Related Documents
Demo:https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/node
Tutorial:
Initialize VChart: https://visactor.io/vchart/api/API/vchart
Node server-side rendering tutorial: https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/node
Top comments (0)