首页 > 解决方案 > 点击图表时如何显示数据?

问题描述

我已经显示了一个 TreeMap。我想显示我点击的东西的信息。所以我试图重现Dash Tutorial part 4中给出的第一个示例。但是它似乎没有回应:

from os.path import abspath, dirname, join

import dash_core_components as dcc
import dash_html_components as html

from dash.dependencies import Input, Output
import pandas as pd
import plotly.express as px

from ..server import app

import json

@app.callback(
    Output('click-data', 'children'),
    [Input('graph', 'clickData')])
def display_click_data(clickData):
    return json.dumps(clickData, indent=2)


def get_tickers():
    with open(join(base_dir, data_path), 'rb') as fp:
        stock_df = pd.read_excel(fp)
        stock_df = stock_df.dropna()
        # stock_df = stock_df.where(pd.notnull(stock_df), None)
        return stock_df


df = get_tickers()


def layout():
    return html.Div([
        html.Div([
            html.Div([
                html.H5('Stocks', style={'textAlign': 'center', 'padding': 10}),
                dcc.Graph(id='graph',
                   figure=px.treemap(df, path=['Country', 'Exchange'], # values='pop',
                  # color='lifeExp', hover_data=['iso_alpha'],
                  # color_continuous_scale='RdBu',
                  # color_continuous_midpoint=np.average(df['lifeExp'], weights=df['pop'])
                ))
            ], className='pretty_container twelve columns'),
        ], className='pretty_container twelve columns'),
        html.Div([
            dcc.Markdown("""
                **Click Data**

                Click on markets in the graph.
            """),
            html.Pre(id='click-data', style=styles['pre']),
        ], className='three columns'),
    ])


if __name__ == "__main__":
    app.run_server(debug=False, port=8051)

确实,正如您在 gif 中看到的那样:

responsive_treemap|690x310

clickData回馈None

标签: python-3.xonclickclicktreemapplotly-dash

解决方案


推荐阅读