Chart.js标签问题
所以我做了一个新冠肺炎跟踪器(为印度地区)网络应用程序使用Node.js的Express.js和EJS。因此，我遇到的问题是，在使用库chart.js创建图表时，我使用此API来获取数据，该图表是Y轴和X轴日期(从这次流行病开始到现在的日期)上的总确诊病例的图表。这些信息是从api中获取的。我使用https://api.covid19india.org/data.json循环来迭代数组，获取特定数据，并将其推入一个空数组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:<%=dailyDateChange%>使用此标签图表未呈现[这是正在发送数据但未呈现2 and an image of the output的源页的图像，但当将标签替换为labels:<%=dailyCnf%>时，图表将呈现。image after replacing the labels
我试着把日期数据转换成字符串，再把日期数据转换成毫秒，再把它转换成字符串，对我来说没什么用。我甚至不明白这个问题是什么，有人可以解释并提供解决方案吗？
回答 1
Stack Overflow用户
发布于 2020-06-04 11:32:51
当使用<%= %>打印dailyDateChange时，它只是将其“打印”为输出。考虑一下这一点:您将console.log与字符串元素一起使用-您不会在输出中使用双引号。
但是在您的代码中，您需要使用双引号将label的值括起来。
目前你可能会得到类似这样的东西：
labels: [10 April, 11 April]当你需要这个的时候：
labels: ["10 April", "11 April"]要做到这一点，最简单的方法是通过JSON.stringify转换它并使用<%- %>`。- tag (而不是=)不会转义字符串。
下面的代码应该可以为您工作：
labels: <%- JSON.stringify(dailyDateChange) %>请注意，我还删除了标签周围的[]，因为Stringify为我们做了这件事。
https://stackoverflow.com/questions/62160649
复制相似问题
腾讯云开发者
