如何使用sql数据填充chart.js？

import mysql.connector
import json

# 连接到MySQL数据库
cnx = mysql.connector.connect(user='your_username', password='your_password',
                              host='your_host', database='your_database')
cursor = cnx.cursor()

# 执行SQL查询
query = "SELECT category, value FROM your_table"
cursor.execute(query)

# 获取查询结果
results = cursor.fetchall()

# 转换结果为Chart.js所需的数据格式
chart_data = []
for row in results:
    category = row[0]
    value = row[1]
    chart_data.append({'label': category, 'data': value})

# 关闭数据库连接
cursor.close()
cnx.close()

# 使用Chart.js创建图表
chart_config = {
    'type': 'bar',
    'data': {
        'labels': [item['label'] for item in chart_data],
        'datasets': [{
            'label': 'Chart Data',
            'data': [item['data'] for item in chart_data],
            'backgroundColor': 'rgba(0, 123, 255, 0.5)'
        }]
    }
}

# 将图表配置转换为JSON字符串
chart_json = json.dumps(chart_config)

# 在HTML页面中使用Chart.js渲染图表
# <canvas id="myChart"></canvas>
# <script>
#     var ctx = document.getElementById('myChart').getContext('2d');
#     var chartConfig = JSON.parse('{{ chart_json }}');
#     new Chart(ctx, chartConfig);
# </script>