Chart.js 标签问题

Question

所以我正在使用 Node.js Express.js 和 EJS 制作一个 COVID-19 跟踪器（针对印度地区）网络应用程序。所以我遇到的问题是在使用库 chart.js 创建图表时我正在使用这个 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>

标签：<%=dailyDateChange%> 使用此标签图表未呈现[这里是数据正在发送但未呈现的源页面的图像2 and an image of the output 但是当将标签替换为 labels:<%=dailyCnf%> 时，图表正在呈现。 image after replacing the labels

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

Answer 1

当使用 <%= %> 打印 dailyDateChange 时，它只是 "prints" 作为输出。考虑一下：您将 console.log 与字符串元素一起使用 - 在输出中不会在其周围加上双引号。

但是在您的代码中，您需要用双引号将标签的值括起来。

目前你可能会得到这样的东西：

labels: [10 April, 11 April]

当你需要这个时：

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

最简单的方法是通过 JSON.stringify 转换它并改用 <%- %>`。 - 标记（而不是 =）不会对字符串进行转义。

此代码应该适合您：

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

请注意，我还从 around label 中删除了 []，因为 Stringify 为我们做了这件事。

Chart.js 标签问题

Chart.js Label Issue

javascript

ejs

chart.js