chart.js 提交数据创建条形图时不渲染

问题描述 投票：0回答：0

chart.js 在提交数据以创建条形图时不呈现。 我之前曾尝试使用 chart.js 版本 2.9.4 测试条形图生成（如果使用其他版本，图表将不会显示。我也不明白为什么） 它可以从 phpmyadmin 带来信息正常显示但是当我在我的项目中实际使用它时将数据发送到 dashboard.html 图形将不会显示数据。但是当没有数据发送时，图形将显示为如图所示的空图形。

enter image description here enter image description here

我想知道如何让图表显示数据。

这是 app.py 文件。

@app.route('/')
def index():
    # ===============================aqi data===============================
    cur.execute(f'SELECT avg, time FROM aqi ORDER BY time DESC LIMIT 24')
    result = cur.fetchall()
    avg = [r[0] for r in result[::-1]]
    date = [r[1].strftime('%b %d, %Y %H:%M:%S') for r in result[::-1]]
    return render_template('dashboard.html', avg_data=avg, date_data=date)

这是 dashboard.html

\<!DOCTYPE html\>
\<html lang="en"\>

\<head\>
\<meta charset="UTF-8"\>
\<meta http-equiv="X-UA-Compatible" content="IE=edge"\>
\<meta name="viewport" content="width=device-width, initial-scale=1.0"\>
\<title\>Dashboard\</title\>
\<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"\>
\<link rel="stylesheet" href="/static/dashboard_style.css"\>
\<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"\>
\<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"\>
\<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"\>\</script\>
\<script\>
function updateTime() {
var currentTime = new Date();
var dateOptions = { day: 'numeric', month: 'numeric', year: 'numeric' };
var timeOptions = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
var date = currentTime.toLocaleDateString('en-GB', dateOptions);
var time = currentTime.toLocaleTimeString('en-GB', timeOptions);
document.getElementById('datetime').innerHTML = date + ' ' + time;
}
setInterval(updateTime, 1000);
\</script\>
\</head\>

\<body onload="updateTime()"\>
\<div class="box-content" style="height: 265px;"\>
\<canvas id="myChart" style="height: 100%; width: 100%;"\>\</canvas\>
\</div\>

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var gradient = ctx.createLinearGradient(0, 0, 0, 500);
        gradient.addColorStop(0, 'rgba(255, 0, 0, 0.3)'); // red at the top
        gradient.addColorStop(0.2, 'rgba(255, 162, 0, 0.3)'); // red at the top
        gradient.addColorStop(0.5, 'rgba(255, 255, 60, 0.3)'); // red at the top
        gradient.addColorStop(0.8, 'rgba(132, 255, 0, 0.3)'); // red at the top
        gradient.addColorStop(1, 'rgba(0, 204, 255, 0.3)'); // blue at the bottom
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [{% for dt in date_data %} '{{ dt }}',{% endfor %}],
        // labels: [{% for dt in date_data %} '{{ dt }}',{% endfor %}],
        datasets: [{
            label: 'Average/Hour : ',
            data: [{% for dt in avg_data %} {{ dt }}, {% endfor %}],
            type: 'line',
                borderColor: 'rgba(130, 130, 130, 1)',
                    fill: false,
                        borderWidth: 2,
                            pointRadius: 8,
                                tension: 0.3,
                                    backgroundColor: gradient,
                                        pointBackgroundColor: [{% for dt in avg_data %}
        {% if dt >= 0 and dt <= 25 %}
        'rgba(0, 204, 255, 1)',
            {% elif dt > 25 and dt <= 50 %}
        'rgba(132, 255, 0, 1)',
            {% elif dt > 50 and dt <= 100 %}
        'rgba(255, 255, 60, 1)',
            {% elif dt > 100 and dt <= 200 %}
        'rgba(255, 162, 0, 1)',
            {% else %}
        'rgba(255, 0, 0, 1)',
            {% endif %}
        {% endfor %}],
    
                            }, {
            label: 'Average/Hour : ',
                data: [{% for dt in avg_data %} { { dt } }, {% endfor %}],
        backgroundColor: [{% for dt in avg_data %}
        {% if dt >= 0 and dt <= 25 %}
        'rgba(0, 204, 255, 0.3)',
            {% elif dt > 25 and dt <= 50 %}
        'rgba(132, 255, 0, 0.3)',
            {% elif dt > 50 and dt <= 100 %}
        'rgba(255, 255, 60, 0.3)',
            {% elif dt > 100 and dt <= 200 %}
        'rgba(255, 162, 0, 0.3)',
            {% else %}
        'rgba(255, 0, 0, 0.3)',
            {% endif %}
        {% endfor %}],
    
        borderColor: [{% for dt in avg_data %}
        {% if dt >= 0 and dt <= 25 %}
        'rgba(0, 204, 255, 1)',
            {% elif dt > 25 and dt <= 50 %}
        'rgba(132, 255, 0, 1)',
            {% elif dt > 50 and dt <= 100 %}
        'rgba(255, 255, 60, 1)',
            {% elif dt > 100 and dt <= 200 %}
        'rgba(255, 162, 0, 1)',
            {% else %}
        'rgba(255, 0, 0, 1)',
            {% endif %}
        {% endfor %}],
        borderWidth: 1
                        }],
                    },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        maxTicksLimit: 6
                    }
                }]
            },
            legend: { display: false },
            title: {
                display: true,
                    text: "Air Quality Index (AQI)"
            },
            responsive: true,
                maintainAspectRatio: false,
                }
            });
    </script>
        <!-- <script>
            setTimeout(function () {
                location.reload();
            }, 10000);
        </script> -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>
\</body\>
\</html\>

我想知道如何让图表显示数据。

canvas html5-canvas chart.js jinja2
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.