保存 Altair 图表#

Altair 图表对象有一个 Chart.save() 方法,允许以多种格式保存图表。

JSON 格式#

Altair 输出的基本图表表示形式是 JSON 字符串格式;Altair 提供的一个核心方法是 Chart.to_json(),它返回一个表示图表内容的 JSON 字符串。此外,您可以使用 Chart.save() 将图表保存到 JSON 文件,方法是传递带有 .json 扩展名的文件名。

例如,在这里我们将一个简单的散点图保存为 JSON

import altair as alt
from vega_datasets import data

chart = alt.Chart(data.cars.url).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color='Origin:N'
)

chart.save('chart.json')

生成文件的内容将看起来像这样

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {
    "view": {
      "continuousHeight": 300,
      "continuousWidth": 300
    }
  },
  "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": {"type": "point"}
}

然后可以使用 vegaEmbed 库将此 JSON 插入到任何网页中。

HTML 格式#

如果您希望 Altair 负责为您处理 HTML 嵌入,您可以使用以下方式将图表直接保存到 HTML 文件中

chart.save('chart.html')

这将创建一个简单的 HTML 模板页面,加载 Vega、Vega-Lite 和 vegaEmbed,以便在浏览器中打开时图表能够渲染。

例如,将上面的散点图保存为 HTML 会创建一个包含以下内容的文件,该文件可以在任何支持 javascript 的现代网页浏览器中打开和渲染

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net.cn/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net.cn/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net.cn/npm/vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script type="text/javascript">
    var spec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "config": {
        "view": {
          "continuousHeight": 300,
          "continuousWidth": 300
        }
      },
      "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": {"type": "point"}
    };
    var opt = {"renderer": "canvas", "actions": false};
    vegaEmbed("#vis", spec, opt);
  </script>
</body>
</html>

您可以在此处查看结果:chart.html

默认情况下,vegaEmbed 中使用 canvas 渲染可视化。要更改为 svg 渲染,请按如下方式使用 embed_options

chart.save('chart.html', embed_options={'renderer':'svg'})

注意

这与 alt.renderers.enable('svg') 不同,后者在 Jupyter notebook 中将图表渲染为静态 svg 图像。

离线 HTML 支持#

默认情况下,由 chart.save('chart.html') 生成的 HTML 文件从在线 CDN 位置加载必要的 JavaScript 依赖项。这会生成一个小的 HTML 文件,但这意味着显示图表需要活动的互联网连接。

作为替代方案,可以向 chart.save 提供 inline=True 关键字参数,以生成包含所有必要 JavaScript 依赖项的 HTML 文件。这会导致文件大小变大,但以这种方式生成的 HTML 文件无需活动的互联网连接即可显示。

chart.save('chart.html', inline=True)

注意

调用带有 inline=Truechart.save 需要附加依赖项

PNG、SVG 和 PDF 格式#

要将 Altair 图表对象保存为 PNG、SVG 或 PDF 图像,可以使用

chart.save('chart.png')
chart.save('chart.svg')
chart.save('chart.pdf')

注意

将图表保存为图像需要附加依赖项,通过运行解释 Vega-Lite 规范并以图像形式输出所需的 javascript 代码来完成。

altair_saver#

注意

altair_saver 在 Altair 4 及更早版本中使用。它不再维护,已被提供卓越用户体验和性能的 vl-convert 所取代。

PNG 图形尺寸/分辨率#

使用 chart.save() 创建 PNG 图像时,生成图像的分辨率默认为每英寸 72 像素 (ppi)。要在保持相同物理尺寸的同时更改图像的分辨率,可以向 chart.save 提供 ppi 参数。例如,以每英寸 200 像素的分辨率保存图像

chart.save('chart.png', ppi=200)

要在保持分辨率的同时更改生成图像的物理尺寸,可以使用 scale_factor 参数。例如,以默认的 72 ppi 分辨率将图像保存为默认大小的两倍

chart.save('chart.png', scale_factor=2)

附加依赖项#

将图表保存为图像或离线 HTML 文件需要 vl-convert

conda install -c conda-forge vl-convert-python

pip install vl-convert-python

vl-convert 不需要任何外部依赖项。有关信息和已知的限制,请参阅 vl-convert 文档。

可共享 URL#

Chart.to_url() 方法可用于构建一个可共享的 URL,以便在在线 Vega 编辑器中打开图表规范。

import altair as alt
from vega_datasets import data

chart = alt.Chart(data.cars.url).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color='Origin:N'
)

chart.to_url()
    'https://vega.github.io/editor/#/url/vega-lite/N4Igxg9gdgZglgcxALlANzgUwO4tJKAFzigFcJSBnAdTgBNCALFAZgAY2AacaYsiygAlMiRoVYcAvpO50AhoTl4QpAE4AbFCDGEADpWQB6Q2DpQAdACtKdTOrhpV5qJkKGougLaG0mBHIBaeUVKV0oAATQARnMAJgBOczZDYLkTOVVKK0poEBkQTwyAa2VCAE9dTC1dCBJxfMwoSDoSJFQedQhVZXg7Oi0AeVVEEhBucsqtKAhPEjlNfIAPHqx1fuQQQS7QmuxMbvGKqo2AR1I5IjhFYl887jKVvq0AWTh1TEoAfUrVT4BxeadKBjEATY4gM4XYjXBxVaTcAAklDAjEwhS0On0Rh8fjk5gQV0YpAARuY4BBDMjUYUcf4AvZCJgfABWOJscwxay5SRAA'