我正在尝试创建一个Chart.js折线图,其中可以通过渲染标签来动态设置标签。
下面是www.example.com中的代码views.py:
def graph1(request):
labels = [1, 2, 3, 4, 5]
data1 = [1, 3, 2, 5, 4]
data2 = [5, 8, 9, 6, 7]
player1 = 'Paul'
player2 = 'Lisa'
return render(request, 'graph1.html', {
'labels': labels,
'data1': data1,
'data2': data2,
'player1': player1,
'player2': player2,
})
下面是HTML代码:
<div id="container" style="width: 100%;">
<canvas id="line-chart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>
var config = {
type: 'line',
data: {
labels: {{ labels }},
datasets: [{
data: {{ data1 }},
label: "Player 1",
borderColor: "#3e95cd",
fill: false,
tension: 0
}, {
data: {{ data2 }},
label: "Player 2",
borderColor: "#8e5ea2",
fill: false,
tension: 0
}
]
},
};
window.onload = function() {
var ctx = document.getElementById('line-chart').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
我的图表是这样显示的:
enter image description here
而不是有静态标签显示“球员1”和“球员2”,我想这些是动态设置。所以,也许第一次显示为“保罗”和“丽莎”,下一次显示为“彼得”和“玛丽”(取决于什么是从数据库中读取)。
我尝试了不同的选项,但没有通过渲染获得此设置:
<div id="container" style="width: 100%;">
<canvas id="line-chart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>
var config = {
type: 'line',
data: {
labels: {{ labels }},
datasets: [{
data: {{ data1 }},
label: {{ player1 }},
borderColor: "#3e95cd",
fill: false,
tension: 0
}, {
data: {{ data2 }},
label: {{ player2 }},
borderColor: "#8e5ea2",
fill: false,
tension: 0
}
]
},
};
window.onload = function() {
var ctx = document.getElementById('line-chart').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
用上面的代码来做,那么线图根本不会显示。
我感谢任何帮助,让这个工作。我是一个初学者Python/Pycharm开发人员,这是我的第一个项目。
1条答案
按热度按时间wbrvyc0a1#
我能够自己解决这个问题,只需在标签的渲染数据周围添加引号,如以下代码所示: