Как заставить Vega-Lite / D3 работать в Nuxt. js - PullRequest
Новая
       104

Как заставить Vega-Lite / D3 работать в Nuxt. js

0 голосов
/ 11 апреля 2020

Я пытаюсь заставить простую визуализацию Vega-Lite работать в Nuxt и с трудом. Вот документация Vega-Lite о том, как встроить простой график в файл HTML. 

<!DOCTYPE html>
<html>
  <head>
    <title>Embedding Vega-Lite</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.10.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.10.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.5.2"></script>
  </head>
  <body>
    <div id="vis"></div>

    <script type="text/javascript">
      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'}
        }
      };
      vegaEmbed('#vis', yourVlSpec);
    </script>
  </body>
</html>

Как заставить этот синтаксис работать в Nuxt?

Я пробовал это: 

<template>
<div>
  <div id="vis"></div>
</div>
</template>

<script>
import vegaEmbed from 'vega-embed'

export default {

  data() {
    return {
      chart1: {
              $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'}
        }
      }
    }
    },

    methods: {
      async draw(){

        let yourV1Spec = JSON.parse(this.chart1)
        await vegaEmbed('#vis', yourVlSpec);
      }      
    },
}

</script>

Я явно делаю что-то не так, потому что это не работает. По крайней мере, я знаю, что часть данных работает правильно, хотя. Это та часть vegaEmbed, которую я не могу понять.

Пока что единственный способ заставить это работать должным образом - это сделать визуализацию Vega в отдельном файле. js и импортировать ее в мой файл. vue. 

import vegaEmbed from 'vega-embed';

var yourV1Spec = {

{
        $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'}
        }
      };


    // Embed the visualization in the container with id `vis`
    vegaEmbed('#vis', yourVlSpec);

Но как мне сделать это в более правильном стиле Vue / Nuxt и заставить его работать?

...