python - 一个页面中的 Django 多个 chartJs 聊天
问题描述
我正在开发仪表板。我有 3 个 html 页面,其中有一个图表,如下所示。我有 3 个图表,因为我将在整个 django 项目的其他 html 页面中使用这些图表。所以我决定将图表放在不同的 html 页面中,并从视图中提供数据。
条形图1.html
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
条形图2.html
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
条形图3.html
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
我希望这些图表显示在 master.html 页面中,并将提供来自字典的数据。有可能吗,我该怎么做。
解决方案
首先,您需要从您的视图中返回您的字典。像这样..
votes_dict={'one':12,'two': 19,'three': 3,'four': 5,'five': 2,'six': 3}
return render(request, 'master.html',{'votes':votes_dict})
所以 votes_dict 是你的字典,而 votes 就是你要调用它的名字,所以你可以在你的模板上引用它。
然后在你的模板上它看起来像这样......
{% block content %}
{% if votes %}
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [{{ votes.one }}, {{ votes.two }}, {{ votes.three }}, {{ votes.four }}, {{ votes.five }}, {{ votes.six }} ],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
{% endif %}
如果您的字典大于一维,它将看起来更像这样
{% for vote in votes %}
{{ vote.one }}, {{ vote.two }}, {{ vote.three }}, {{ vote.four }}, {{ vote.five }}, {{ vote.six }}
{% endfor %}
{% endif %}
推荐阅读
- tsql - 如何查找每个问题的订阅者数量?
- function - 如何在我的聊天应用程序中为所有人添加删除功能
- python - WebElement 类型的 Python 对象不是 JSON 可序列化的
- php - 阅读/理解 Clarifai 查询结果
- discord - Discord.py 在消息中添加内容
- java - 使用图形时如何处理私人空白?
- arm - 现实世界的 DRAM 只写应用程序
- html - 是否可以在全屏 div 前面显示全屏 div 之外的 HTML 元素?
- python - 为什么画一个边框很厚的 PyGame 矩形会画一个加号呢?
- typo3 - TYPO3 创建帖子后重定向到 ShowAction