Chart.js传递数据生成柱状图不渲染的问题排查请求

1. 检查Flask后端数据传递格式 #

确保app.py中传递的数据是JSON可序列化的纯数据类型（如列表、数字、字符串），而非数据库查询对象或其他不可直接序列化的类型。

示例正确的后端处理逻辑：

from flask import Flask, render_template
import mysql.connector

app = Flask(__name__)

@app.route('/dashboard')
def dashboard():
    # 数据库连接与查询
    db = mysql.connector.connect(
        host="localhost",
        user="your_username",
        password="your_password",
        database="your_db"
    )
    cursor = db.cursor()
    cursor.execute("SELECT category, count FROM your_table")
    raw_data = cursor.fetchall()
    
    # 转换为Chart.js所需的标签数组和数据数组
    chart_labels = [item[0] for item in raw_data]
    chart_values = [item[1] for item in raw_data]
    
    db.close()
    # 将纯数据传递到模板
    return render_template('dashboard.html', labels=chart_labels, values=chart_values)

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

2. 前端模板正确接收并格式化数据 #

Flask传递的Python对象需要转换为JavaScript可识别的格式，必须使用|tojson过滤器避免转义错误。

错误示例（直接使用变量会导致格式异常）： #

var myChart = new Chart(ctx, {
    data: {
        labels: {{ labels }},
        datasets: [{ data: {{ values }} }]
    }
});

正确示例（使用|tojson转换）： #

<canvas id="barChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script>
var ctx = document.getElementById('barChart').getContext('2d');
var barChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: {{ labels|tojson }},
        datasets: [{
            label: '数据统计',
            data: {{ values|tojson }},
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{ ticks: { beginAtZero: true } }]
        }
    }
});
</script>

3. 浏览器控制台排查错误 #

按F12打开开发者工具，查看Console面板：

• 若出现Unexpected token '&'类错误：说明数据未正确转义，必须添加|tojson过滤器。
• 若出现Chart is not defined：检查Chart.js的CDN链接是否在图表渲染脚本之前加载，链接是否有效。
• 若出现数据为空：确认后端查询是否返回结果，可在模板中添加调试代码验证：

  <!-- 调试用，确认数据是否传递成功 -->
  <p>接收的标签：{{ labels|tojson }}</p>
  <p>接收的数值：{{ values|tojson }}</p>
  

4. 确认数据类型匹配 #

确保传递的values数组全为数字类型，若数据库返回的是字符串格式的数字，需在后端转换为整数/浮点数：

chart_values = [int(item[1]) for item in raw_data]
# 或浮点数：float(item[1])

内容的提问来源于stack exchange，提问作者163 CHATCHAPONG KOSALANANTA