Как использовать vegaEmbed для встраивания визуализации Altair в html-документ?

Я пытаюсь встроить визуализацию данных Altair, созданную на Python, в html-документ. Я следовал инструкциям на https://altair-viz.github.io/user_guide/saving_charts.html , в частности методу json/VegaEmbed. Ниже приведен мой код для html:

      <!DOCTYPE html>
<html>
<head>
  <style>
    .error {
        color: red;
    }
  </style>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <h1>Altair Embed Demo</h1>
  <div id="vis"></div>
  <script>
    vegaEmbed('#vis', 'C:/Users/myName/chart.json');
  </script>
</body>
</html>

Как видно здесь, визуализация Altair сохраняется локально как chart.json, и я вызываю на ней модуль vegaEmbed.

Однако проблема, с которой я сталкиваюсь, заключается в том, что полученная страница не выводит визуализацию Altair. Мой путь правильный, я импортировал правильный модуль и правильно использовал vegaEmbed() (я думаю). Может ли кто-нибудь дать мне совет по этому вопросу, если у него есть опыт работы с Vega/Altair? Спасибо.

Источник

1 ответ

Я думаю, вы столкнулись с проблемой безопасности, когда ваш браузер не позволяет вам получить доступ к локальным файлам. Если вы используете URL-адрес файла, размещенного в Интернете, он будет работать:

      <!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script type="text/javascript">
    vegaEmbed("#vis", "https://raw.githubusercontent.com/vega/vega-lite/next/examples/specs/bar.vl.json");
  </script>
</body>
</html>

Здесь есть несколько предложений о том, как получить доступ к локальным файлам в браузере, которые вы можете изучить, чтобы найти наиболее подходящее решение для вас Загрузка локального файла JSON.

Вы также можете встроить спецификацию vega напрямую, а не сохранять ее в виде отдельного файла, вставив в документ что-то вроде следующего (как на странице документации, на которую вы ссылаетесь):

          var spec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
      "config": {
        "view": {
          "continuousHeight": 300,
          "continuousWidth": 400
        }
      },
      "data": {
        "url": "https://vega.github.io/vega-datasets/data/cars.json"
      },
      "encoding": {
        "color": {
          "field": "Origin",
          "type": "nominal"
        },
        "x": {
          "field": "Horsepower",
          "type": "quantitative"
        },
        "y": {
          "field": "Miles_per_Gallon",
          "type": "quantitative"
        }
      },
      "mark": "point"
    };
Источник
Другие вопросы по тегам