Question

破折号应用程序有问题。从2018年开始，它显示了两个相互重叠的条形图（可视显示110条）。但是，悬停时的值仍然是正确的值（大约55且正在减小）。

您可以在底部找到代码。

此外，当我使用matplotlib.pyplot进行绘图时，该图会正确显示。

此外，条之间的细线（大约为55）显示正确的值。这是第二个条堆叠的地方。

有人知道如何解决这个问题还是知道如何解决？堆叠的条应消失，以便显示正确的55左右的值。


import sys
sys.path.insert(1, 'path')
import pandas as pandas
import matplotlib.pyplot as plt
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
from dash.dependencies import Input, Output
import forex_factory_calendar_scraper as ffcs
import economic_calendar_reader as ecr 
import time


#  Fuctions for RangeSlider. Dash does not support DateTime objects
def unixTimeMillis(dt):
    ''' Convert datetime to unix timestamp '''
    return int(time.mktime(dt.timetuple()))

def unixToDatetime(unix):
    ''' Convert unix timestamp to datetime. '''
    return pd.to_datetime(unix,unit='s')

def getMarks(start, end, daterange, Nth=50000):
    ''' Returns the marks for labeling. 
        Every Nth value will be used.
    '''
    result = {}
    for i, date in enumerate(daterange):
        if(i%Nth == 1):
            # Append value to dict
            result[unixTimeMillis(date)] = str(date.strftime('%Y-%m-%d'))
    return result



app = dash.Dash(__name__)

#  Importing data
ffcs.get_economic_calendar("calendar.php?month=dec.2019","calendar.php?month=dec.2019")
calendar = ecr.read_economic_calendar()

#calendar = calendar.loc[calendar.Currency == 'EUR']
available_currencies = calendar.Currency.unique()

app.layout = html.Div([
    html.Div([

        html.Div([
            dcc.Dropdown(
                id='currency1',
                options=[{'label': i, 'value': i} for i in available_currencies],
                value='EUR'
            )
        ],
        style={'width': '48%', 'display': 'inline-block'}),

        html.Div([
            dcc.Dropdown(
                id='currency2',
                options=[{'label': i, 'value': i} for i in available_currencies],
                value='USD'
            )
        ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),

        html.Div([
            dcc.Dropdown(
                id='events1',

            )
        ],
        style={'width': '48%', 'display': 'inline-block'}),

        html.Div([
            dcc.Dropdown(
                id='events2',

            )
        ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),

        html.Div([
            dcc.RadioItems(
                id='disp_col1',
                options=[
                {'label': 'Actual', 'value':'Actual'},
                {'label': 'Surprise %', 'value':'Surprise_Pct'}
                ],
                value='Actual'
            )
        ],
        style={'width': '48%', 'display': 'inline-block'}),

        html.Div([
            dcc.RadioItems(
                id='disp_col2',
                options=[
                {'label': 'Actual', 'value':'Actual'},
                {'label': 'Surprise %', 'value':'Surprise_Pct'}
                ],
                value='Actual'
            )
        ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),
    ]),
    html.Div([
        dcc.Graph(id='surprice_pct-ts1'),
    ],style={'width': '48%', 'display': 'inline-block'}),

    html.Div([
        dcc.Graph(id='surprice_pct-ts2'),
    ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),

    html.Div([
        html.Div([
            dcc.RangeSlider(
                id='year_slider',
                min = unixTimeMillis(calendar.Date.min()),
                max = unixTimeMillis(calendar.Date.max()),
                value = [unixTimeMillis(calendar.Date.min()),
                         unixTimeMillis(calendar.Date.max())]
                #marks=getMarks(calendar.Date.min(),
                #            calendar.Date.max(), calendar.Date)
            )
        ],style={'width': '70%', 'display': 'inline-block'})
    ],style={'width': '100%', 'text-align': 'center'})
])

#   Left Graph ------------------------------------------------------------->>
@app.callback(
     dash.dependencies.Output('surprice_pct-ts1', 'figure'),
    [dash.dependencies.Input('currency1', 'value'),
     dash.dependencies.Input('events1', 'value'),
     dash.dependencies.Input('disp_col1', 'value'),
     dash.dependencies.Input('year_slider', 'value')])

def update_ts1(currency1,events1, disp_col1, year_slider):

    output = calendar[calendar.Currency == currency1]
    output = output[output.Event == events1]


    data = []
    trace_data = go.Bar(x=list(output.Date),
                        y=list(output[disp_col1]))

    data.append(trace_data)
    layout = {'title':'Economic Indicators - {} - {}'.format(currency1,disp_col1)}

    return {
        'data':data,
        'layout': layout
    }

@app.callback(
    dash.dependencies.Output('events1', 'options'),
    [dash.dependencies.Input('currency1', 'value')])
def update_evets1(currency1):
    output = calendar[calendar.Currency == currency1]
    available_events1 = output.Event.unique()
    return [{'label': i, 'value': i} for i in available_events1]

@app.callback(
    dash.dependencies.Output('events1', 'value'),
    [dash.dependencies.Input('currency1', 'value')])
def update_evets1(currency1):
    output = calendar[calendar.Currency == currency1]
    available_events1 = output.Event.unique()
    return available_events1[0]


#   Right Graph ------------------------------------------------------------->>
@app.callback(
     dash.dependencies.Output('surprice_pct-ts2', 'figure'),
    [dash.dependencies.Input('currency2', 'value'),
     dash.dependencies.Input('events2', 'value'),
     dash.dependencies.Input('disp_col2', 'value'),
     dash.dependencies.Input('year_slider', 'value')])

def update_ts1(currency2,events2, disp_col2, year_slider):

    output = calendar[calendar.Currency == currency2]
    output = output[output.Event == events2]


    data = []
    trace_data = go.Bar(x=list(output.Date),
                        y=list(output[disp_col2]))

    data.append(trace_data)
    layout = {'title':'Economic Indicators - {} - {}'.format(currency2,disp_col2)}

    return {
        'data':data,
        'layout': layout
    }

@app.callback(
    dash.dependencies.Output('events2', 'options'),
    [dash.dependencies.Input('currency2', 'value')])
def update_evets1(currency2):
    output = calendar[calendar.Currency == currency2]
    available_events2 = output.Event.unique()
    return [{'label': i, 'value': i} for i in available_events2]

@app.callback(
    dash.dependencies.Output('events2', 'value'),
    [dash.dependencies.Input('currency2', 'value')])
def update_evets1(currency2):
    output = calendar[calendar.Currency == currency2]
    available_events2 = output.Event.unique()
    return available_events2[0]

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

Dash / Plotly条形图显示两个条形图相互重叠，有效显示实际值的两倍

0 个答案: