JavaScript 图表中的日期标签无法正确显示

Question

我正在做一个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？？我想我应该把标签的格式改成最新的。我该怎么做？

Answer 1

我想您的javascript最终看起来像

data: {
labels: [2022-03-16, 2022-03-17, ...]

标签被视为数字，并进行了一些减法运算，因此最终会得到1998等值。

这些值应该是字符串：

labels: ["2022-03-16", "2022-03-17", ...]

换句话说，

labels: ["{{date7}}", "{{date6}}", ...]