gpt4 book ai didi

python - 如何将 Chart.js 集成到 Django 中?

转载 作者:行者123 更新时间:2023-12-01 07:58:28 25 4
gpt4 key购买 nike

首先,我是 Django 和 Chart.js 的初学者。我想要做什么:我想显示一个饼图。我知道使用语法 {{content}} .html 模板可以获取动态数据,但它不适用于我的饼图模板。

我所拥有的:我已准备好饼图作为我的应用程序的 .html 模板。当我直接将数据编码到模板中时,它已经工作得很好。

我的观点:


def index(request):

return render(
request,
"mep/chart.html",
{
labels: ['F', 'M'],
data: [52, 82],
colors: ["#FF4136", "#0074D9"]
}

)

我的模板:


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
<title>Geschlechtsverteilung Patientendaten </title>
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
</div>

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',// bar, horizontalBar, pie, line, doughnut, radar, polarArea

data: {
labels: {{labels}},
datasets: [{
data: {{data}},
backgroundColor: {{colors}}
}]
},
options: {
title: {
display: true,
text: 'Geschlechtsverteilung Patientendaten',
},
legend: {
disblay: true,
position: 'right',
labels: {
fontColor: '#000'
}
}

}


});

</script>
</body>
</html>

正如您所看到的,我正在尝试在 view.py 中传递模板的数据,但它不起作用。当我直接在 Chart.html 中指定数据时,它起作用了

有什么解决办法吗???

最佳答案

您的代码中有两个问题。首先,您需要更正您的 views.py

您需要在上下文字典中使用字符串作为,因此您需要将其更改为:

def index(request):

return render(
request,
"base/chart.html",
{
'labels': ['F', 'M'],
'data': [52, 82],
'colors': ["#FF4136", "#0074D9"]
}

)

然后您需要在 django 模板 中指定这些变量可以安全 渲染:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
<title>Geschlechtsverteilung Patientendaten </title>
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
</div>

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',// bar, horizontalBar, pie, line, doughnut, radar, polarArea

data: {
labels: {{labels|safe}},
datasets: [{
data: {{data|safe}},
backgroundColor: {{colors|safe}}
}]
},
options: {
title: {
display: true,
text: 'Geschlechtsverteilung Patientendaten',
},
legend: {
disblay: true,
position: 'right',
labels: {
fontColor: '#000'
}
}

}


});

</script>
</body>
</html>

关于python - 如何将 Chart.js 集成到 Django 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55832576/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com