我将在html中绘制水平条形图,但未显示。我从views.py发送2变量是{{top5StockCode}}和{{top5TotalSales}}。 views.py发送的{{top5StockCode}}的值为['23166','21108','85123A','48185','22470']和{{top5TotalSales} }是[[2671740,227322,171770,158120,143808]。这是我在html文件中的代码。
<div class="top5">
<p class="topicTop5">Top 5 Selling Products</p>
<canvas id="top5"></canvas>
</div>
<script>
var top5 = document.getElementById('top5').getContext('2d');
var chart = new Chart(top5, {
type: 'horizontalBar',
data: {
labels: {{top5StockCode}},
datasets: [{
label: 'Top 5 selling products ',
backgroundColor: '#CE3B21',
borderColor: 'rgb(255, 99, 132)',
data: {{top5TotalSales}}
}]
},
options: {
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
我很困惑,为什么它没有显示图形。请帮我。谢谢
将<div class="top5">
更改为<div id="top5">
或
更改
var top5 = document.getElementById('top5').getContext('2d');
to
var top5 = document.getElementsByClassName('top5')[0].getContext('2d');