Chart.js误读标签和坐标轴的数组

Question

我的问题。我的 charts.js 图形不能正确显示，我正在为轴标签、x-value 和 y-value 传入数组，但数值在屏幕上不能正确显示。我为轴标签、x值和y值传递了数组，但这些值在屏幕上没有正确显示。

在y轴标签中，系统将每个字母都视为一个条目，而不是将数组中的每个元素视为一列。

在数据中，它在没有明确原因的情况下插入了零值。下面是一个对比图，显示了它应该是什么样子，实际是什么样子。

它应该是这样的

其实看起来是这样的

总体结构：这是一个使用express框架和EJS作为视图引擎的node.jsMySQL应用。我使用sequelize是我的ORM。

具体的问题。

x-labels（由字符串数组定义）不正确地将每个字母视为一个元素。
在前两个数据项之后，插入了三个空白数据项；不清楚为什么。

我所尝试的:

我控制台.记录了我在页面加载时通过的所有数组，以确保它们正确出现（它们是）。这里是终端的标签和2个数据系列的截图。
我把终端的数组直接复制粘贴到了ejs中。这样就成功了(我就是这样得到这个对比截图的).
我确认了回调函数中数组的数据类型（它们都是数组，这是正确的）。

我的代码:

路线：

const   express     = require("express"),
        router      = express.Router({mergeParams: true}),
        moment      = require("moment"),
        charts      = require("chart.js"),
        Bookkeeping = require("../src/models/bookkeeping"),
        User        = require("../src/models/user");

const errorHandler = (err) => {
    console.error("whoooa there cowboy: ", err)
};

//================================================================================
//show
//================================================================================
router.get("/users/:id", async (req, res) => {
    try {
        const   entryDate   = [],
                sales       = [],
                costs       = [],
                profit      = [];
        //finding user based off id in request
        let user = await User.findByPk(req.params.id);

        //finding all bookkeeping data for this user
        let bookkeeping = await Bookkeeping.findAll({
            where: {
              user_teleg_id: user.user_teleg_id
            }
        });

        //logging sales into array
        let n = 1
        bookkeeping.forEach((entry) => {
            entryDate.push("Week " + n)
            sales.push(entry.dataValues.week_sales)
            costs.push(entry.dataValues.week_cost_total)
            profit.push(entry.dataValues.profit)
            n ++
        });

        res.render("users/showBookeeping", {
            user: user,
            entryDate: entryDate,
            sales: sales,
            costs: costs,
            profit: profit,
            moment: moment});
    } catch(e) {
        console.log(e);
    }
});

EJS文件

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Users Index</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
    </head>
    <body>
         <div class="row">
              <canvas id="myChart" width="400" height="200"></canvas>
              <script type="text/javascript">

                   const entryDate = "<%= entryDate %>"
                   const costs = "<%= costs %>"
                   const sales = "<%= sales %>"

                   const ctx = document.getElementById('myChart').getContext('2d');
                   const myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                             labels: entryDate,
                             datasets: [{
                                  label: 'sales',
                                  data:  sales,
                                  backgroundColor: 'rgba(255, 99, 132, 0.2)',
                                  borderColor: 'rgba(255, 99, 132, 1)',
                                  borderWidth: 1
                             },
                             {
                                  label: "costs",
                                  data: costs,
                                  backgroundColor: "rgba(54, 162, 235, 0.2)",
                                  borderColor: "rgba(54, 162, 235, 1)",
                                  borderWidth: 1
                             }]

                         },
                         options: {
                             scales: {
                                  yAxes: [{
                                       ticks: {
                                            beginAtZero: true
                                       }
                                  }]
                             }
                         }
                    });
              </script>
         </div>
   </body>

非常感谢你的帮助，如果有什么有用的信息我漏掉了，请告诉我。

欢呼

Answer 1

这是一个棘手的问题!

我看到这些行在 ejs 档案

const entryDate = "<%= entryDate %>"

当这个实际呈现时，它将运行 toString() 抵值

['Week 1','Week 2','Week 3'].toString()
'Week 1,Week 2,Week 3'

而在模板中，其周围的 toString() 响应的引号。

const entryDate = "Week 1,Week 2,Week 3"

由于字符串只是一个字符数组它的渲染方式很奇怪.

试着对 ejs 而不是。

const entryDate = <%- JSON.stringify(entryDate) %>
// also notice we removed the quotes! :)

这将运行 JSON.stringify 对照它，生成字符串。

> JSON.stringify(['Week 1','Week 2','Week 3'])
'["Week 1","Week 2","Week 3"]'

这样就会出现这样的结果

const entryDate = ["Week 1","Week 2","Week 3"]

对所有的数组都这样做，就可以了！

Chart.js误读标签和坐标轴的数组

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

1个回答

最新问题

Chart.js误读标签和坐标轴的数组

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

1个回答

最新问题

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