Chart.js标签问题

问题描述 投票:0回答:1

因此,我正在使用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

而且我尝试将日期数据转换为字符串并将日期数据转换为毫秒,然后再次将其转换为字符串没有任何事情对我有用。我什至不明白这是什么问题有人可以解释一下并为此提供解决方案。

javascript chart.js ejs
1个回答
0
投票

[使用dailyDateChange打印<%= %>时,仅将其“打印”为输出。考虑以下问题:您将console.log与字符串元素一起使用-输出中不会在双引号周围引起双引号。

但是在您的代码中,您希望在标签的值两边加上双引号。

当前您可能会收到类似的内容:

labels: [10 April, 11 April]

虽然您需要此:

labels: ["10 April", "11 April"]

最简单的方法是通过JSON.stringify进行转换,而改用`。 -标记(而不是=)不会转义字符串。

此代码应为您工作:

labels: <%- JSON.stringify(dailyDateChange) %>

请注意,我还从标签周围删除了[],就像Stringify为我们所做的那样。

© www.soinside.com 2019 - 2024. All rights reserved.