因此,我正在使用Node.js Express.js和EJS制作COVID-19跟踪器(用于印度地区)Web应用程序。所以我遇到的问题是在使用库chart.js创建Chart时,并且我正在使用此API来获取数据https://api.covid19india.org/data.json。该图表适用于Y轴和X轴日期(从这场大流行开始至今这些信息是从api获取的。我正在使用for循环遍历数组并获取特定数据,并将其推送到空数组dailyDateChnage=[], dailyCnf=[];
然后将这些数据传递到EJS文件analytics.ejs <%=dailyDateChnage%> <%=dailyCnf%>
const dailyDateChange=[],dailyCnf=[];
const url = "https://api.covid19india.org/data.json";
const covidDataApi = axios.get(url).then(function(response) {
covidData = response.data;
for (var i = 0; i < covidData.cases_time_series.length; i++) {
let day = covidData.cases_time_series[i].date;
let cnf = covidData.cases_time_series[i].totalconfirmed;
dailyDateChange.push(day);
dailyCnf.push(cnf);
}
app.get("/analytics", function(req, res) {
res.render("analytics", {
dailyDateChange: dailyDateChange,
dailyCnf: dailyCnf,
});
});
我的用于在文件analytics.ejs中使用chart.js创建图表的代码
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data:{
labels:[<%=dailyDateChange%>],
datasets: [{
label: 'Daily Confirmed Cases',
data: [<%=dailyCnf%>],
fill:false,
backgroundColor: [
"red"
],
borderColor: [
"red"
],
borderWidth: 2,
pointBorderColor:"red",
pointBackgroundColor:"red",
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
labels:使用此标签,图表未呈现[这是正在发送但未呈现数据的源页面的图像2and an image of the output但是当将标签替换为标签:时,将呈现图表。 image after replacing the labels
而且我尝试将日期数据转换为字符串并将日期数据转换为毫秒,然后再次将其转换为字符串没有任何事情对我有用。我什至不明白这是什么问题有人可以解释一下并为此提供解决方案。
[使用dailyDateChange
打印<%= %>
时,仅将其“打印”为输出。考虑以下问题:您将console.log与字符串元素一起使用-输出中不会在双引号周围引起双引号。
但是在您的代码中,您希望在标签的值两边加上双引号。
当前您可能会收到类似的内容:
labels: [10 April, 11 April]
虽然您需要此:
labels: ["10 April", "11 April"]
最简单的方法是通过JSON.stringify
进行转换,而改用`。 -标记(而不是=)不会转义字符串。
此代码应为您工作:
labels: <%- JSON.stringify(dailyDateChange) %>
请注意,我还从标签周围删除了[],就像Stringify为我们所做的那样。