在Dash中执行回调时,如何为children属性中的某些单词设置样式?

时间:2019-04-11 23:25:19

标签: python plotly plotly-dash

我很好奇能否在破折号的children属性中设置某些单词的样式。

我的文本是children属性的一部分,因为我有一个用于更新文本的回调。但是,我只想将冒号之前的单词加粗,而不是整个文本。我似乎无法在Dash中找到一种优雅的方法。

我所看到的像是家庭工资总额:500 我希望其显示为家庭自付总额: 500

当前代码

html.Div([
    html.Div([
        html.Div(id='total-pay',
                children='',
                style={'font-weight': 'bold'}
        ),
    ], className='six columns'),
], className='row'),

@app.callback(
        Output('total-pay', 'children'),
        [Input('date-picker-range', 'start_date'),
        Input('date-picker-range', 'end_date')],
    )
    def dataview_text(start_date, end_date):
        df = df_paystub
        df = df[(df['Date'] >= start_date) & (df['Date'] <= end_date)]
        totalpay = 'Take Home Pay Total: ' + str(round(df['CheckTotal'].sum(),2))
        return totalpay

谢谢!

2 个答案:

答案 0 :(得分:1)

这是一种实现方法:

totalpay = html.P(children=[
        html.Strong('Take Home Pay Total: '),
        html.Span(str(round(df['CheckTotal'].sum(),2)))
    ])
return totalpay

如果您想使用降价样式,也可以使用dcc.Markdown

答案 1 :(得分:0)

您可以使用python中的#ifndef TERM_H_ #define TERM_H_ #include <iostream> struct Term { int coeff; // Coefficient of term int expo; // Exponent of term Term * next; // Pointer to next term of Polynomial // Constructor Term(int init_coeff = 0, int init_expo = 0): coeff(init_coeff), expo(init_expo), next(nullptr) {} friend std::ostream & operator << (std::ostream & out, const Term & a_term) { // Write implementation of Term operator<< here. } }; #endif // TERM_H_ #ifndef POLYNOMIAL2_H_# define POLYNOMIAL2_H_ #include <iostream> #include <vector> #include "term.h" using namespace std; class Polynomial { public: Polynomial(); Polynomial(vector<int> initial_coefficients, vector<int> initial_exponents); int degree() const; double evaluate(double x) const; friend Polynomial operator + (const Polynomial & left_poly, const Polynomial & right_poly); friend Polynomial operator * (const Polynomial & left_poly, const Polynomial & right_poly); friend Polynomial operator = -(const Polynomial & source); friend std::ostream & operator << (std::ostream & out_stream, const Polynomial & a_poly); // REC'D friend std::istream & operator >> (std::istream & in_stream, Polynomial & a_poly); // P'BACK void copy(const Polnomial & source); private: Term * first; }; #endif #include <iostream> #include "polynomial2.h" #include "term.h" using namespace std; Polynomial::Polynomial() { size = 0; head = new Term; head - > coeff = 0; head - > expo = 0; head - > next = head; } Polynomial::Polynomial(std::vector<int> initial_coefficients, std::vector<int> initial_exponents) { ; } Polynomial::~Polynomial() { clear(); } int Polynomial::degree() const { return head - > next - > expo; } double Polynomial::evaluate(double x) const { if () { return operator } } Polynomial operator + (const Polynomial & left_poly, const Polynomial & right_poly) { void polyadd(struct Node * poly1, struct Node * poly2, struct Node * poly) { while (poly1 - > next && poly2 - > next) { // If power of 1st polynomial is greater then 2nd, then store 1st as it is // and move its pointer if (poly1 - > pow > poly2 - > pow) { poly - > pow = poly1 - > pow; poly - > coeff = poly1 - > coeff; poly1 = poly1 - > next; } // If power of 2nd polynomial is greater then 1st, then store 2nd as it is // and move its pointer else if (poly1 - > pow < poly2 - > pow) { poly - > pow = poly2 - > pow; poly - > coeff = poly2 - > coeff; poly2 = poly2 - > next; } // If power of both polynomial numbers is same then add their coefficients else { poly - > pow = poly1 - > pow; poly - > coeff = poly1 - > coeff + poly2 - > coeff; poly1 = poly1 - > next; poly2 = poly2 - > next; } // Dynamically create new node poly - > next = (struct Node * ) malloc(sizeof(struct Node)); poly = poly - > next; poly - > next = NULL; } while (poly1 - > next || poly2 - > next) { if (poly1 - > next) { poly - > pow = poly1 - > pow; poly - > coeff = poly1 - > coeff; poly1 = poly1 - > next; } if (poly2 - > next) { poly - > pow = poly2 - > pow; poly - > coeff = poly2 - > coeff; poly2 = poly2 - > next; } poly - > next = (struct Node * ) malloc(sizeof(struct Node)); poly = poly - > next; poly - > next = NULL; } } } Polynomial operator * (const Polynomial & left_poly, const Polynomial & right_poly) { ; } Polynomial operator = -(const Polynomial & source) { ; } std::ostream & operator << (std::ostream & out_stream, const Polynomial & a_poly) // REC'D { } std::istream & operator >> (std::istream & in_stream, Polynomial & a_poly) // P'BACK { } void Polynomial::copy(const Polnomial & source) { ; } 包轻松实现此目的,还有其他更好的方法来渲染内部反应HTML组件,例如this,但到目前为止,我还没有找到一种适用于python的方法。 / p>

这是使用dash_dangerously_set_inner_html`包的示例代码。

dash_dangerously_set_inner_html