如何将graphics呈现为节点中的图像
我想在服务器上以图像格式呈现堆叠的条形图。
预期的用途是推到像不支持SVG的Twitter这样的服务。 以及代码被部署到像Heroku这样的服务
我已经尝试了Plotly（他们的节点包太可怕了，他们的API文档很差）。 我也看过Google Graph，Chart.js和AnyChart，但是他们不支持渲染图像，因为我可以看到
你可以用Vega做到这一点
Vega是一种可视化语法，用于创build，保存和共享交互式可视化devise的声明性格式。 借助Vega，您可以使用JSON格式描述数据可视化，并使用HTML5 Canvas或SVG生成交互式视图。
例如，使用堆叠条形图示例规范，您可以使用以下代码将图表呈现为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文件： 