我正在做一個 Django 專案。在我的 chart.html 檔案中,我創建了一個 javascript 條形圖。圖表的資料和標簽已在我的views.py檔案中定義。
這是我的 JavaScript 條形圖:(我正在繪制此圖表以顯示最近 7 天的訂單號)
var ctx = document.getElementById("BarChart7d");
var BarChart7d = new Chart(ctx, {
type: 'bar',
data: {
labels: [{{date7}}, {{date6}}, {{date5}}, {{date4}}, {{date3}}, {{date2}}, {{date1}}],
datasets: [{
label: "orders: ",
backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', "#e74a3b", "#f6c23e", "#9B59B6", "#D68910"],
hoverBackgroundColor: ['#353F8C ', '#17a673', '#2c9faf', "#9C4545", "#9C8545", "#4A235A", "#784212"],
borderColor: "#4e73df",
data: {{value7day}},
}],
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder: false
},
ticks: {
maxTicksLimit: 6
},
maxBarThickness: 80,
}],
yAxes: [{
ticks: {
callback: function(value, index, values) {
return number_format(value);
}
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
}
}],
},
legend: {
display: false
},
tooltips: {
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
caretPadding: 10,
callbacks: {
label: function(tooltipItem, chart) {
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel number_format(tooltipItem.yLabel);
}
}
},
}
});
和要在 中定義的{{value7day}}標簽:{{date7}}{{date1}}views.py
rnow = {'date': '2022-01-15', 'value': 34},
...
{'date': '2022-03-16', 'value': 26},
{'date': '2022-03-17', 'value': 15},
{'date': '2022-03-18', 'value': 13},
{'date': '2022-03-21', 'value': 29},
{'date': '2022-03-22', 'value': 22},
{'date': '2022-03-23', 'value': 22},
{'date': '2022-03-24', 'value': 25},
{'date': '2022-03-25', 'value': 15}]
day1 = list(rnow)[-1]
day2 = list(rnow)[-2]
day3 = list(rnow)[-3]
day4 = list(rnow)[-4]
day5 = list(rnow)[-5]
day6 = list(rnow)[-6]
day7 = list(rnow)[-7]
value7day = [ day7['value'], day6['value'], day5['value'] , day4['value'], day3['value'], day2['value'], day1['value']]
date7 = day7['date']
date6 = day6['date']
date5 = day5['date']
date4 = day4['date']
date3 = day3['date']
date2 = day2['date']
date1 = day1['date']
日期資料已經是字串型別。但是,標簽顯示不正確。而不是顯示為 2022-03-17, 2022-03-18, 2022-03-21 它們顯示為 2002, 2001, 1998 ?? 我想我應該將標簽的格式更改為日期。我該怎么做?
uj5u.com熱心網友回復:
我想你的 javascript 最終看起來像
data: {
labels: [2022-03-16, 2022-03-17, ...]
標簽被視為數字,并進行了一些減法運算,因此您最終會得到 1998 等值。
這些值應該是字串:
labels: ["2022-03-16", "2022-03-17", ...]
換一種說法
labels: ["{{date7}}", "{{date6}}", ...]
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/450915.html
上一篇:GEThttp://localhost:5000/auth/me404(未找到)
下一篇:為什么要隱藏django密鑰?
