Как встроить vega-lite в компонент svelte? - PullRequest
Новая
       53

Как встроить vega-lite в компонент svelte?

0 голосов
/ 31 мая 2019

Я попытался использовать простой пример для создания встроенного графа vega-lite в компоненте svelte. Я получаю vegaEmbed не определено.

Я установил vega, vega-lite и vega-embed через npm до 

<script>
    import { onMount } from 'svelte';
    import * as vega from "vega"
    import * as vega-lite from "vega-lite"
    import * as vegaEmbed  from "vega-embed";
    onMount(() => {
    let 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'}
        }
      };
      vegaEmbed('#vis', yourVlSpec);
        })
</script>
<div id="vis"></div>

Я хочу просто отобразить график вегалитов, затем я хочу, чтобы он получил свои спецификации от родительского компонента.

1 Ответ

2 голосов
/ 15 июля 2019

Ваш вариант будет работать, если вы импортируете сценарии непосредственно в ваш index.html или ваш конкретный HTML-код следует.

<script src="https://cdn.jsdelivr.net/npm/vega@5.4.0/build/vega.js"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@3.3.0/build/vega-lite.js"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@4.2.0/build/vega-embed.js"></script>

Согласно документации в https://github.com/vega/vega-embed/blob/v4.0.0/README.md версия npm предоставляет другой метод, а именно embed.проверьте раздел Справочника API в README.

вы можете попробовать что-то вроде

embed('#vis', yourVlSpec)

Обратите внимание, что аргумент спецификации рассматривает строковые аргументы как URL, который долженвернуть JSON.поэтому, если ваша спецификация - строка, было бы хорошо сделать JSON.parse(yourSpec) перед вызовом функции embed.

Вот как я это сделал в своем угловом проекте.Примечание. Ниже приведен конкретный пример с использованием машинописного текста ..: D

  1. Сначала импортируйте функцию внедрения из ваших узлов node_modules.import {default as embed} from 'vega-embed;
  2. Затем в функции внутри моего компонента я вызвал метод embed.
  3. В моем случае это был ngOnInit, который вызывается во время инициализации компонента. 
ngOnInit() {

   // option 1: using a string spec.
   let spec = `{
     "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
     "description": "Simple bar chart",
     "data": {
         "values": [
             {"x": "A", "y": 28}, {"x": "y", "B": 55}, {"x": "C", "y": 43},
             {"x": "D", "y": 91}, {"x": "E", "y": 81}, {"x": "F", "y": 53},
             {"x": "G", "y": 19}, {"x": "H", "y": 87}, {"x": "I", "y": 52}
         ]
     },
     "mark": "bar",
     "encoding": {
         "x": {"field": "x", "type": "ordinal"},
         "y": {"field": "y", "type": "quantitative"}
     }
   }`;
   embed("#vis", "/assets/data/spec2.json", { actions: false }).catch(error =>
     console.log(error)
   );



   // option 2: where the spec is saved as a json file in my project assets.    
   embed("#vis2", JSON.parse(spec), { actions: false }).catch(error =>
     console.log(error)
   );
 }
...