如何在节点中将图形渲染为图像
How to render a graph as image in node
我想在服务器上以图像格式呈现堆积条形图。
预期用途是推送到不支持 SVG 的服务，例如 twitter。以及可部署到 Heroku
等服务的代码
我已经尝试过 Plotly（他们的节点包非常过时而且他们的 API 文档很差）。我还查看了 Google Graph、Chart.js 和 AnyChart，但据我所知它们不支持渲染图像
您可以通过 Vega
完成此操作
Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization designs. With Vega you can describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.
例如，使用 stacked bar chart example spec 您可以使用以下代码将图表呈现为 PNG 文件：
// START vega-demo.js
var vega = require('vega')
var fs = require('fs')
var stackedBarChartSpec = require('./stacked-bar-chart.spec.json');
// create a new view instance for a given Vega JSON spec
var view = new vega
.View(vega.parse(stackedBarChartSpec))
.renderer('none')
.initialize();
// generate static PNG file from chart
view
.toCanvas()
.then(function (canvas) {
// process node-canvas instance for example, generate a PNG stream to write var
// stream = canvas.createPNGStream();
console.log('Writing PNG to file...')
fs.writeFile('stackedBarChart.png', canvas.toBuffer())
})
.catch(function (err) {
console.log("Error writing PNG to file:")
console.error(err)
});
// END vega-demo.js
// START stacked-bar-chart.spec.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}
}
}
}
]
}
// END stacked-bar-chart.spec.json
将输出PNG文件：
我使用 Nightmare 无头浏览器在 Node.js 下捕获图表、可视化和报告。
使用 Nightmare，您可以使用 Node.js 下的各种 browser-based 可视化框架，包括 C3 and D3 这两个都很棒。
我实际上创建了一个名为 c3-chart-maker 的 npm 模块，它包含 Nightmare 并允许您通过向其提供一些数据和 C3 图表定义来呈现 Node.js 下的图表。
这样安装：
npm install --save c3-chart-maker
这样使用：
const c3ChartMaker = require('c3-chart-maker');
const yourData = ... your data ...
const chartDefinition = { ... c3 chart definition ... }
const outputFilePath = "your-chart-output-file.png";
c3ChartMaker(yourData, chartDefinition, outputFilePath)
.then(() => {
console.log('Done');
})
.catch(err => {
console.error(err);
});
请查看 C3 example gallery 图表示例并查看 C3 图表定义是什么样的。
您也可以手动使用 Nightmare 来捕获任何网页或 browser-based 可视化。
安装 Nightmare：
npm install --save nightmare
下面是一个可以捕获网页的例子：
const Nightmare = require('nightmare');
// This is the web page to capture.
// It can also be a local web server!
// Or serve from the file system using file://
const urlToCapture = "http://my-visualization.com";
const outputFilePath = "your-chart-output-file.png";
const nightmare = new Nightmare(); // Create Nightmare instance.
nightmare.goto(urlToCapture) // Point the browser at the requested web page.
.wait("svg") // Wait until the specified HTML element appears on the screen.
.screenshot(outputImagePath) // Capture a screenshot to an image file.
.end() // End the Nightmare session. Any queued operations are completed and the headless browser is terminated.
.then(() => {
console.log("Done!");
})
.catch(err => {
console.error(err);
});
I've written more extensively about this on my blog.
我也在我的书中用了整整一章来讨论这个 Data Wrangling with JavaScript。
简单的 Headless NodeJS（不是本地主机或 web-based）
出于我的目的，我只想绘制图表而不启动本地主机服务器或其他任何东西。所以我用了 chartjs-node-canvas 和 chart.js
安装：
npm i chartjs-node-canvas chart.js
在此我将其写入文件以显示它有效，但我个人只需要将 Base64 字符串上传到某处
// Install libs with: npm i chartjs-node-canvas chart.js
// Docs https://www.npmjs.com/package/chartjs-node-canvas
// Config documentation https://www.chartjs.org/docs/latest/axes/
const fs = require('fs');
const { ChartJSNodeCanvas } = require('chartjs-node-canvas');
const width = 400; //px
const height = 400; //px
const backgroundColour = 'white'; // Uses https://www.w3schools.com/tags/canvas_fillstyle.asp
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, backgroundColour });
const configuration = {
type: 'line', // for line chart
data: {
labels: [2018, 2019, 2020, 2021],
datasets: [{
label: "Sample 1",
data: [10, 15, -20, 15],
fill: false,
borderColor: ['rgb(51, 204, 204)'],
borderWidth: 1,
xAxisID: 'xAxis1' //define top or bottom axis ,modifies on scale
},
{
label: "Sample 2",
data: [10, 30, 20, 10],
fill: false,
borderColor: ['rgb(255, 102, 255)'],
borderWidth: 1,
xAxisID: 'xAxis1'
},
],
},
options: {
scales: {
y: {
suggestedMin: 0,
}
}
}
}
async function run() {
const dataUrl = await chartJSNodeCanvas.renderToDataURL(configuration);
const base64Image = dataUrl
var base64Data = base64Image.replace(/^data:image\/png;base64,/, "");
fs.writeFile("out.png", base64Data, 'base64', function (err) {
if (err) {
console.log(err);
}
});
return dataUrl
}
run()
这是文档 https://www.npmjs.com/package/chartjs-node-canvas and the Config documentation is here https://www.chartjs.org/docs/latest/axes/
我想在服务器上以图像格式呈现堆积条形图。
预期用途是推送到不支持 SVG 的服务，例如 twitter。以及可部署到 Heroku
等服务的代码我已经尝试过 Plotly（他们的节点包非常过时而且他们的 API 文档很差）。我还查看了 Google Graph、Chart.js 和 AnyChart，但据我所知它们不支持渲染图像
您可以通过 Vega
完成此操作Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization designs. With Vega you can describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.
例如，使用 stacked bar chart example spec 您可以使用以下代码将图表呈现为 PNG 文件：
// START vega-demo.js
var vega = require('vega')
var fs = require('fs')
var stackedBarChartSpec = require('./stacked-bar-chart.spec.json');
// create a new view instance for a given Vega JSON spec
var view = new vega
.View(vega.parse(stackedBarChartSpec))
.renderer('none')
.initialize();
// generate static PNG file from chart
view
.toCanvas()
.then(function (canvas) {
// process node-canvas instance for example, generate a PNG stream to write var
// stream = canvas.createPNGStream();
console.log('Writing PNG to file...')
fs.writeFile('stackedBarChart.png', canvas.toBuffer())
})
.catch(function (err) {
console.log("Error writing PNG to file:")
console.error(err)
});
// END vega-demo.js
// START stacked-bar-chart.spec.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}
}
}
}
]
}
// END stacked-bar-chart.spec.json
将输出PNG文件：
我使用 Nightmare 无头浏览器在 Node.js 下捕获图表、可视化和报告。
使用 Nightmare，您可以使用 Node.js 下的各种 browser-based 可视化框架，包括 C3 and D3 这两个都很棒。
我实际上创建了一个名为 c3-chart-maker 的 npm 模块，它包含 Nightmare 并允许您通过向其提供一些数据和 C3 图表定义来呈现 Node.js 下的图表。
这样安装：
npm install --save c3-chart-maker
这样使用：
const c3ChartMaker = require('c3-chart-maker');
const yourData = ... your data ...
const chartDefinition = { ... c3 chart definition ... }
const outputFilePath = "your-chart-output-file.png";
c3ChartMaker(yourData, chartDefinition, outputFilePath)
.then(() => {
console.log('Done');
})
.catch(err => {
console.error(err);
});
请查看 C3 example gallery 图表示例并查看 C3 图表定义是什么样的。
您也可以手动使用 Nightmare 来捕获任何网页或 browser-based 可视化。
安装 Nightmare：
npm install --save nightmare
下面是一个可以捕获网页的例子：
const Nightmare = require('nightmare');
// This is the web page to capture.
// It can also be a local web server!
// Or serve from the file system using file://
const urlToCapture = "http://my-visualization.com";
const outputFilePath = "your-chart-output-file.png";
const nightmare = new Nightmare(); // Create Nightmare instance.
nightmare.goto(urlToCapture) // Point the browser at the requested web page.
.wait("svg") // Wait until the specified HTML element appears on the screen.
.screenshot(outputImagePath) // Capture a screenshot to an image file.
.end() // End the Nightmare session. Any queued operations are completed and the headless browser is terminated.
.then(() => {
console.log("Done!");
})
.catch(err => {
console.error(err);
});
I've written more extensively about this on my blog.
我也在我的书中用了整整一章来讨论这个 Data Wrangling with JavaScript。
简单的 Headless NodeJS（不是本地主机或 web-based）
出于我的目的，我只想绘制图表而不启动本地主机服务器或其他任何东西。所以我用了 chartjs-node-canvas 和 chart.js
安装：
npm i chartjs-node-canvas chart.js
在此我将其写入文件以显示它有效，但我个人只需要将 Base64 字符串上传到某处
// Install libs with: npm i chartjs-node-canvas chart.js
// Docs https://www.npmjs.com/package/chartjs-node-canvas
// Config documentation https://www.chartjs.org/docs/latest/axes/
const fs = require('fs');
const { ChartJSNodeCanvas } = require('chartjs-node-canvas');
const width = 400; //px
const height = 400; //px
const backgroundColour = 'white'; // Uses https://www.w3schools.com/tags/canvas_fillstyle.asp
const chartJSNodeCanvas = new ChartJSNodeCanvas({ width, height, backgroundColour });
const configuration = {
type: 'line', // for line chart
data: {
labels: [2018, 2019, 2020, 2021],
datasets: [{
label: "Sample 1",
data: [10, 15, -20, 15],
fill: false,
borderColor: ['rgb(51, 204, 204)'],
borderWidth: 1,
xAxisID: 'xAxis1' //define top or bottom axis ,modifies on scale
},
{
label: "Sample 2",
data: [10, 30, 20, 10],
fill: false,
borderColor: ['rgb(255, 102, 255)'],
borderWidth: 1,
xAxisID: 'xAxis1'
},
],
},
options: {
scales: {
y: {
suggestedMin: 0,
}
}
}
}
async function run() {
const dataUrl = await chartJSNodeCanvas.renderToDataURL(configuration);
const base64Image = dataUrl
var base64Data = base64Image.replace(/^data:image\/png;base64,/, "");
fs.writeFile("out.png", base64Data, 'base64', function (err) {
if (err) {
console.log(err);
}
});
return dataUrl
}
run()
这是文档 https://www.npmjs.com/package/chartjs-node-canvas and the Config documentation is here https://www.chartjs.org/docs/latest/axes/