Как скользить изображение на графике - PullRequest
Новая
       18

Как скользить изображение на графике

0 голосов
/ 08 апреля 2019

Я хотел бы иметь способ скользить по изображению или сообщению по графику, чтобы показать какое-то сообщение до / после ввода пользователем данных. Так далеко, мое изображение появляется только внизу страницы, а не поверх символа, чтобы его было хорошо видно. Ниже мой код: 

def my_chart():
    response.files.append(URL('my_default','static/js/pygal-tooltips.min.js'))
    response.headers['Content-Type']='image/svg+xml'

    custom_style = Style(
        background='transparent',
        plot_background='transparent',
        foreground='#53E89B',
        foreground_strong='#53A0E8',
        foreground_subtle='#630C0D',
        opacity='.6',
        opacity_hover='.9',
        transition='400ms ease-in',
        colors=('#E853A0', '#E8537A', '#E95355', '#E87653', '#E89B53')
        )
    chart = pygal.StackedLine(fill=True, interpolate='cubic', style=BlueStyle)
    data = db(db.amount).select()
    chart.add('W', [i.amount for i in data])
    return chart.render()
def myWeight():
    chart= URL('my_default', 'amount_chart')
    form = SQLFORM(db.amount, submit_button=T('Submit')).process()
    news = ''.join(str(item) for item in ['Hi ', auth.user.first_name, ' I want to make sure that this paragraph appears infron of the chart so that I can adda paragraph/message in'])
    return dict(chart = chart,form=form, news=news)

И это мой взгляд: 

<figure>
    <embed type="image/svg+xml" src="{{=chart}}" />
    <div class="wrapper">
        {{=XML(news)}}
    </div>
</figure>
<h1>{{=form}}</h1>

1 Ответ

0 голосов
/ 08 апреля 2019

Я получил что-то хорошее. Но все равно нужно вставить изображение в качестве фона. {{extend 'layout.html'}} 

<style>
    #note {
        position: absolute;
        z-index: 101;
        top: 0;
        left: 0;
        right: 0;
        background: #FAE3E3;
        text-align: center;
        line-height: 2.5;
        overflow: hidden; 
        -webkit-box-shadow: 0 0 5px black;
        -moz-box-shadow:    0 0 5px black;
        box-shadow:         0 0 5px black;
        }
    @-webkit-keyframes slideDown {
        0%, 100% { -webkit-transform: translateY(-70px); }
        10%, 90% { -webkit-transform: translateY(0px); }
    }
    @-moz-keyframes slideDown {
        0%, 100% { -moz-transform: translateY(-70px); }
        10%, 90% { -moz-transform: translateY(0px); }
    }
    .cssanimations.csstransforms #note {
        -webkit-transform: translateY(-70px);
        -webkit-animation: slideDown 12.5s 1.0s 1 ease forwards;
        -moz-transform:    translateY(-50px);
        -moz-animation:    slideDown 12.5s 1.0s 1 ease forwards;
    }
</style>
<div id="note">
    {{=XML(news)}}
</div>
<figure>
    <embed type="image/svg+xml" src="{{=chart}}" />
</figure>
<h1>{{=form}}</h1>
...