在 Dash 项目中使用 Altair - 应用程序错误运行

Question

我在 Dash 项目中使用 Altair 时遇到问题。

我正在使用 Dash 构建应用程序。要显示在其上的图是使用 Altair 而不是 Plotly-Dash 生成的。当我运行应用程序时，我收到一条错误消息：

dash.exceptions.InvalidCallbackReturnValue: The callback for `[<Output `my-graph.figure`>, <Output `download2.data`>]`
returned a value having type `tuple`
which is not JSON serializable.

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
TypeError: Cannot read properties of null (reading 'layout')

In general, Dash properties can only be dash components, strings, dictionaries, numbers, None, or lists of those.

到最后一部分，我认为这个问题是由 Altair plot 产生的。

所以我的问题是：我该如何解决这个问题？我更喜欢使用 Altair 而不是 Plotly。

你们中有人遇到过类似的问题吗？

Answer 1

可以看到详细的。对于 Dash，没有官方支持和 Altair 绘图 class，但您可以使用 iframe 来呈现您的绘图：

import altair as alt
from vega_datasets import data
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output


cars = data.cars()

# Setup app and layout/frontend
app = dash.Dash(__name__,  external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])
app.layout = html.Div([
    dcc.Dropdown(
        id='x_column-widget',
        value='Miles_per_Gallon',  # REQUIRED to show the plot on the first page load
        options=[{'label': col, 'value': col} for col in cars.columns]),
    html.Iframe(
        id='scatter',
        style={'border-width': '0', 'width': '100%', 'height': '400px'})])

# Set up callbacks/backend
@app.callback(
    Output('scatter', 'srcDoc'),
    Input('x_column-widget', 'value'))
def plot_altair(x_column):
    chart = alt.Chart(cars).mark_point().encode(
        x=x_column,
        y='Displacement',
        tooltip='Horsepower').interactive()
    return chart.to_html()

if __name__ == '__main__':
    app.run_server(debug=True)

在 Dash 项目中使用 Altair - 应用程序错误运行

Using Altair in a Dash project - error running the app

python

altair

plotly-dash

在 Dash 项目中使用 Altair - 应用程序错误 运行

Using Altair in a Dash project - error running the app

python

altair

plotly-dash

在 Dash 项目中使用 Altair - 应用程序错误运行