使用面板时 Altair 绘图未显示答案

【问题标题】：Altair plot not showing when using Panel使用面板时 Altair 绘图未显示
【发布时间】：2019-08-29 15:33:32
【问题描述】：

我正在关注tutorial [github] 使用 Panel 和 Altair。

返回我的情节的函数如下：

@pn.depends(ticker.param.value, date_range_slider.param.value)
def get_plot(ticker, date_range):

    df = data.stocks()
    df['date'] = pd.to_datetime(df['date'])

    start_date, end_date = date_range

    mask = (df['date'] > start_date) & (df['date'] <= end_date)
    dfm = df.loc[mask]

    chart = (alt.Chart(dfm)
        .mark_line()
        .encode(
            x='date', y='price',
            tooltip=alt.Tooltip(['date', 'price']))
        .transform_filter((datum.symbol == ticker))
    )
    return chart

我遇到了一个问题，如果直接执行，图表会正常显示：

但在使用 Panel 运行时不会：

似乎当我将工作中的chart 放入panel 时，它丢失了指向数据的链接：

为仪表板提供服务也有同样的问题，所以在我看来，Panel 和 Altair 之间存在兼容性问题。

有谁知道问题出在哪里以及如何解决？

版本：

面板 - v0.6.0
Altair - v3.2.0
熊猫 - v0.25.1
JupyterLab - v1.0.2
Python - v3.7.4

【问题讨论】：

您是否启用了非默认数据转换器？尝试运行 alt.data_transformers.enable('default') 并查看您的图表是否有效。
@jakevdp - 据我所知，我没有使用非默认数据转换器，运行该命令并不能解决问题。如在链接教程中alt.renderers.enable('default') 在导入 altair 后执行。您能否确认本教程的 Github 存储库中提供的 jupyter notebook 适合您？
我尝试使用最新版本的 JupyterLab 和 Altair 运行本教程。该图表显示，但没有响应小部件输入的更改。我建议在您链接到的 github 存储库上提出一个问题：这个问题似乎非常特定于该存储库。
我遵循相同的链接，我的解决方案运行良好，来自Panel 和Jupyter。软件包版本：altair - 3.2.0、panel - 0.6.0、pandas - 0.24.2、Python - 3.7.3 和 jupyter-notebook - 6.0.0。
我是第一次测试 altair，我发现面板是有用的元素。这个问题解决了吗？ @jakevdp。我遇到了同样的问题。有没有其他方法可以在html页面上动态过滤数据框？

标签： python jupyter-lab altair pyviz

【解决方案1】：

现在可以运行了，运行教程中的代码并在此问题中进行修改会显示绘图并响应小部件输入：

完整代码：

import panel as pn
import altair as alt
import pandas as pd
from vega_datasets import data
import datetime as dt
from altair import datum

alt.renderers.enable('default')
pn.extension('vega')

source = data.stocks()
source = pd.DataFrame(source)
source.head()

# set a title for your dashboard
title = '## Stock Price Dashboard'

subtitle = 'This dashboard allows you to select a company and date range to see stock prices.'

# create list of company names (tickers)
tickers = ['AAPL', 'GOOG', 'IBM', 'MSFT']

# this creates the dropdown widget
ticker = pn.widgets.Select(name='Company', options=tickers)

# this creates the date range slider
date_range_slider = pn.widgets.DateRangeSlider(
    name='Date Range Slider',
    start=dt.datetime(2001, 1, 1), end=dt.datetime(2010, 1, 1),
    value=(dt.datetime(2001, 1, 1), dt.datetime(2010, 1, 1))
)

@pn.depends(ticker.param.value, date_range_slider.param.value)
def get_plot(ticker, date_range):

    df = data.stocks()
    df['date'] = pd.to_datetime(df['date'])

    start_date, end_date = date_range

    mask = (df['date'] > start_date) & (df['date'] <= end_date)
    dfm = df.loc[mask]

    chart = (alt.Chart(dfm)
        .mark_line()
        .encode(
            x='date', y='price',
            tooltip=alt.Tooltip(['date', 'price']))
        .transform_filter((datum.symbol == ticker))
    )
    return chart

dashboard = pn.Row(
    pn.Column(title, subtitle, ticker, date_range_slider),
    get_plot # draw chart function!
)

dashboard

版本：

import session_info
session_info.show()

-----
altair              4.1.0
pandas              1.2.0
panel               0.10.3
vega_datasets       0.9.0
-----
IPython             7.19.0
jupyter_client      6.1.11
jupyter_core        4.7.0

【讨论】：