Как использовать Vega для создания графиков в бэкэнде при использовании express. js - PullRequest
Новая
       17

Как использовать Vega для создания графиков в бэкэнде при использовании express. js

0 голосов
/ 05 февраля 2020

https://vega.github.io/vega/usage/#node Есть примеры рендеринга графиков с использованием внешнего интерфейса javascript. Можно ли сгенерировать графики в бэкэнде и отправить их во внешний интерфейс? Я думаю, что хочу достичь чего-то вроде этого: 

const vega = require('vega')
const lite = require('vega-lite')
const embed = require('vega-embed')
var yourVlSpec = {
  $schema: 'https://vega.github.io/schema/vega-lite/v2.0.json',
  description: 'A simple bar chart with embedded data.',
  data: {
    values: [
      {a: 'A', b: 28},
      {a: 'B', b: 55},
      {a: 'C', b: 43},
      {a: 'D', b: 91},
      {a: 'E', b: 81},
      {a: 'F', b: 53},
      {a: 'G', b: 19},
      {a: 'H', b: 87},
      {a: 'I', b: 52}
    ]
  },
  mark: 'bar',
  encoding: {
    x: {field: 'a', type: 'ordinal'},
    y: {field: 'b', type: 'quantitative'}
  }
};
let vegaspec = lite.compile(yourVlSpec)
var view = new vega.View(vega.parse(vegaspec), 
{renderer: 'none'})


var express = require('express');
var app = express();

app.get('/', function(req, res){
//   Can I send view directly to the front end?
//   res.send(view.toHTML());
});
app.listen(3000);

1 Ответ

0 голосов
/ 06 февраля 2020

Дополнительные пакеты: "vega-lite": "^ 4.0.2", "vega": "^ 5.9.0", "canvas": "^ 2.6.1"

См. https://vega.github.io/vega/usage/ Развертывание на стороне сервера с использованием Node.js.

Минимальный пример: 

const vega = require('vega')
const lite = require('vega-lite')
var express = require('express');
var app = express();

var yourVlSpec = {
  $schema: 'https://vega.github.io/schema/vega-lite/v2.0.json',
  description: 'A simple bar chart with embedded data.',
  data: {
    values: [
      {a: 'A', b: 28},
      {a: 'B', b: 55},
      {a: 'C', b: 43},
      {a: 'D', b: 91},
      {a: 'E', b: 81},
      {a: 'F', b: 53},
      {a: 'G', b: 19},
      {a: 'H', b: 87},
      {a: 'I', b: 52}
    ]
  },
  mark: 'bar',
  encoding: {
    x: {field: 'a', type: 'ordinal'},
    y: {field: 'b', type: 'quantitative'}
  }
};
let vegaspec = lite.compile(yourVlSpec).spec
var view = new vega.View(vega.parse(vegaspec), 
{renderer: "none"})
view.toSVG()
  .then(function(svg) {
    app.get('/', function(req, res){
      res.send(svg);
    });
    app.listen(3000);
  })
  .catch(function(err) { console.error(err); });
...