如何在节点中将图形呈现为图像

Question

我想在服务器上呈现图像格式的堆叠条形图。

预期的用途是推送到不支持SVG的Twitter之类的服务。以及代码被部署到服务，如Heroku

我已经尝试Plotly（他们的节点包是可怕的过时和他们的API文档差）。我也看了谷歌图表，chart.js之和AnyChart的，但他们不支持远渲染图像，我可以看到

Answer 1

你可以用Vega

维加做到这一点是一个可视化的语法，一个声明格式来创建，保存和共享交互式可视化设计。借助Vega，您可以使用JSON格式描述数据可视化，并使用HTML5 Canvas或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文件：