ChartJS甜甜圈颜色未从Flask应用程序中显示。全灰色

Question

在这里寻求帮助。甜甜圈图正确呈现，但所有颜色均为灰色。我已经搜索了chartjs网站并进行了搜索，但似乎无法解决。

这是我的代码：

@app.route('/doughnut_chart')
def doughnut_chart():
    values = []
    labels =['good', 'mediocre','bad']

    colors = ['rgba(0, 153, 0, 0.1)', 'rgba(0,153,153,0.1)','rgba(102,153,51,0.1)']

    good_high = db.session.query(func.sum(Jf_Q1.highwellbeing)/func.sum(Jf_Q1.good_job)).\
        filter(Jf_Q1.working==1).filter(Jf_Q1.good_job==1)

    good_mod = db.session.query(func.sum(Jf_Q1.moderatewellbeing)/func.sum(Jf_Q1.good_job)).\
        filter(Jf_Q1.working==1).filter(Jf_Q1.good_job==1)

    good_low = db.session.query(func.sum(Jf_Q1.lowwellbeing)/func.sum(Jf_Q1.good_job)).\
        filter(Jf_Q1.working==1).filter(Jf_Q1.good_job==1)

    values = [0.82483097725875845114*100,0.14935464044253226798*100,0.01966810079901659496*100]

    return render_template('results.html', values=values,labels=labels, colors=colors)

和我在网页上的脚本代码：

    new Chart(document.getElementById("doughnut-chart"), {
            type: 'doughnut',
            data: {
                labels : {{labels | safe}},
                backgroundColor: {{colors | safe}},
                datasets:
                    [{ data : {{values | safe}}
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Doughnut Chart Title'
                }
            }
    });

这是在Chrome检查器中的外观：

    new Chart(document.getElementById("doughnut-chart"), {
            type: 'doughnut',
            data: {
                labels : ['good', 'mediocre', 'bad'],
                backgroundColor: ['rgba(0, 153, 0, 0.1)', 'rgba(0,153,153,0.1)', 'rgba(102,153,51,0.1)'],
                datasets:
                    [{ data : [82.48309772587584, 14.935464044253226, 1.9668100799016592]
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Doughnut Chart Title'
                }
            }
    });

我尝试过十六进制颜色，例如：

backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9"]

但仍然没有骰子

这是在Chrome和FF中的外观：

my chart

非常感谢您的协助。

谢谢

Answer 1

已解决！数据集是对象列表。我需要将backgroundColor选项放置在数据集中，例如：

datasets:
                    [{ data : [82.48309772587584, 14.935464044253226, 1.9668100799016592],
                    backgroundColor: ['rgba(0, 153, 0, 0.1)', 'rgba(0,153,153,0.1)', 'rgba(102,153,51,0.1)'],
                    fill: true
                }],

我在外面。 RTFM！哈哈