Estoy tratando de incrustar una visualización de datos de Altair que creé en Python, en un documento html. Seguí las instrucciones en https://altair-viz.github.io/user_guide/saving_charts.html , específicamente el método json/VegaEmbed. El siguiente es mi código para el html hasta ahora:
<!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>Como se puede ver aquí, la visualización de Altair se guarda como chart.json localmente y estoy llamando al módulo vegaEmbed en ella.
Sin embargo, el problema que tengo es que la página resultante no muestra la visualización de Altair. Mi ruta es correcta, he importado el módulo correcto y he usado vegaEmbed() correctamente (creo). ¿Alguien podría orientarme sobre este tema si ha tenido experiencia con Vega/Altair? Gracias.
Creo que está encontrando un problema de seguridad con su navegador que no le permite acceder a los archivos locales. Si usa una URL para un archivo alojado en línea, funcionará:
<!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>Aquí hay algunas sugerencias sobre cómo acceder a los archivos locales en el navegador, que puede explorar para encontrar la solución más adecuada para usted Cargando el archivo JSON local .
También puede incrustar la especificación vega directamente en lugar de guardarla como un archivo separado insertando algo como lo siguiente en el documento (como en la página de documentación que vinculó):
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" };