streamlit使用altair画图并保存png图片

Background

• 如下图所示，altair官网API是支持保存各种格式的图片，但是整个过程的配置还是挺麻烦的，需要依赖外部环境，这里记录下踩坑过程。
• Altair官网地址
• Altair Saver Github 地址

一、st.altair_chart 画图源码和效果

• 首先需要安装依赖
• pip install altair vega_datasets
• 下图中右面的折线图是代码效果哈

import altair as alt
import pandas as pd
import streamlit as st
from vega_datasets import data

# We use @st.experimental_memo to keep the dataset in cache
@st.experimental_memo
def get_data():
    source = data.stocks()
    source = source[source.date.gt("2004-01-01")]
    return source

source = get_data()


# Define the base time-series chart.
def get_chart(data):
    hover = alt.selection_single(
        fields=["date"],
        nearest=True,
        on="mouseover",
        empty="none",
    )

    lines = (
        alt.Chart(data, title="Evolution of stock prices")
        .mark_line()
        .encode(
            x="date",
            y="price",
            color="symbol",
        )
    )

    # Draw points on the line, and highlight based on selection
    points = lines.transform_filter(hover).mark_circle(size=65)

    # Draw a rule at the location of the selection
    tooltips = (
        alt.Chart(data)
        .mark_rule()
        .encode(
            x="yearmonthdate(date)",
            y="price",
            opacity=alt.condition(hover, alt.value(0.3), alt.value(0)),
            tooltip=[
                alt.Tooltip("date", title="Date"),
                alt.Tooltip("price", title="Price (USD)"),
            ],
        )
        .add_selection(hover)
    )
    return (lines + points + tooltips).interactive()

chart = get_chart(source)

# 页面出图
st.altair_chart(chart, use_container_width=True)

---

					 下面介绍保存图片功能所需依赖的配置过程(Selenium)

---

1、安装python依赖库

pip install altair_saver selenium

2、在Centos7上安装Chrome浏览器和ChromeDriver

我是在Centos7上，你要是在ubuntu上的话请用apt-get安装。

• 安装Chrome浏览器

yum install https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm

• 查看安装的版本

google-chrome --version

• 然后根据上面安装的版本去下载对应的版本 下载地址

wget http://chromedriver.storage.googleapis.com/99.0.4844.51/chromedriver_linux64.zip

• 配置chromedriver

unzip chromedriver_linux64.zip
chmod a+x chromedriver
cp chromedriver /usr/bin/
chromedriver --version

• selenium代码测试

最终打印信息无报错说明安装成功。

#!/usr/bin/python3
#coding:utf-8
from selenium import webdriver
ch_options = webdriver.ChromeOptions()
#为Chrome配置无头模式
ch_options.add_argument("--headless")  
ch_options.add_argument('--no-sandbox')
ch_options.add_argument('--disable-gpu')
ch_options.add_argument('--disable-dev-shm-usage')
# 在启动浏览器时加入配置
dr = webdriver.Chrome(options=ch_options)
#这是测试网站
url = "https://www.baidu.com"
dr.get(url)
#打印源码
print(dr.page_source)

3、添加图片保存代码

from altair_saver import save as save_chart

# 保存图片
save_chart(chart, "chart.png")