如何在流线型页面中为折线图制作动画

Posted

技术标签:

【中文标题】如何在流线型页面中为折线图制作动画【英文标题】:How to animate a line chart in a streamlit page 【发布时间】:2020-02-02 19:59:06 【问题描述】:

我正在处理一个 ML 项目,我想(相对)实时显示一个带有适应度函数的图表。

我正在使用来自 this SO answer 的代码,只要图表显示在 matplotlib 窗口中,它就可以正常工作。一旦我将它添加到页面中,它就会变成静态图像。

import numpy as np
import matplotlib.pyplot as plt
import matplotlib.animation as animation

fig, ax = plt.subplots()

max_x = 5
max_rand = 10

x = np.arange(0, max_x)
ax.set_ylim(0, max_rand)
line, = ax.plot(x, np.random.randint(0, max_rand, max_x))


def init():  # give a clean slate to start
    line.set_ydata([np.nan] * len(x))
    return line,


def animate(i):  # update the y values (every 1000ms)
    line.set_ydata(np.random.randint(0, max_rand, max_x))
    return line,

ani = animation.FuncAnimation(
    fig, animate, init_func=init, interval=1000, blit=True, save_count=10)

st.pyplot(plt)

知道如何为图表制作动画吗?它不一定是 matplotlib。

【问题讨论】:

更改函数animate(i) 以更新您的新图表数据。 是的,这是 *** 上的第一个精简问题 :) 【参考方案1】:

我收到了我的answer on the streamlit forum,所以我只是在这里复制更新的代码

import matplotlib.pyplot as plt
import numpy as np
import streamlit as st
import time

fig, ax = plt.subplots()

max_x = 5
max_rand = 10

x = np.arange(0, max_x)
ax.set_ylim(0, max_rand)
line, = ax.plot(x, np.random.randint(0, max_rand, max_x))
the_plot = st.pyplot(plt)

def init():  # give a clean slate to start
    line.set_ydata([np.nan] * len(x))

def animate(i):  # update the y values (every 1000ms)
    line.set_ydata(np.random.randint(0, max_rand, max_x))
    the_plot.pyplot(plt)

init()
for i in range(100):
    animate(i)
    time.sleep(0.1)

【讨论】:

以上是关于如何在流线型页面中为折线图制作动画的主要内容,如果未能解决你的问题,请参考以下文章

如何用Echarts制作标准折线图

Tableau Desktop 企业日常问题20Tableau怎么折线变虚线?

Tableau 图表大全5.0之折线图制作

javascript怎么使用canvas制作类似于统计图,折线图,折线走势等

java生成饼状图,条形图,折线图的技术可以动态的显示

Android MPAndroidChart 折线图设置哪些属性?