标签和数据字段仅保存数组中的 2 条数据

Question

前言：我对chart.js非常陌生，所以这可能是缺乏基础知识

我有 2 个异步函数：一个用于构建图表，一个用于准备数据。

窗口加载后调用：

async function chartIt() {
    const ctx = document.getElementById('myChart').getContext('2d');
    const globalVar = await getData();
    const myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: globalVar.xlabels,
        datasets: [
          {
            label: 'Sign Ups',
            data: globalVar.ylabels,
            fill: false,
            borderColor: 'rgba(255, 99, 132, 1)',
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
            borderWidth: 1
          }
        ]
      },
      options: {}
    });
  }

第二个异步函数：

async function getData() {
    const response = await fetch('stats.csv');
    const data = await response.text();
    const xlabels = [];
    const ylabels = [];
    const rows = data.split(/\n/);
    rows.forEach(row => {
      const cols = row.split(',');
      rows.push(cols);
      console.log(cols);
      xlabels.push(cols[0])
      ylabels.push(cols[1])
    });

    console.log('xlabels: ' + xlabels);
    console.log('ylabels: ' + ylabels);
    console.log (rows)
    return { xlabels, ylabels };
};

日志返回一些奇怪的结果，如下所示：

为什么我的标签和数据被作为每个数组中 1 个值的组合放入？为什么每次只停 1 个？

如有任何帮助，我们将不胜感激。谢谢！

尝试将数字设置为单独的值而不是数组。没有显示任何结果。

Answer 1

我不相信这与 Chartjs 有任何关系——你的 getData 函数中的代码对我来说似乎很奇怪。

具体来说，本节：

rows.forEach(row => {
  const cols = row.split(',');
  rows.push(cols);
  console.log(cols);
  xlabels.push(cols[0])
  ylabels.push(cols[1])
});

我不确定您期望数据以什么格式出现，但您要在

rows

的每个元素上运行的 forEach 函数内向

rows

数组添加更多条目 - 这种类型的半-迭代、半递归行为似乎是一个错误，并导致两个数组各有 1 个标签和 1 个值。

Chart.js 本质上需要一个标签数组和一个值数组。您当前控制台记录的内容不是这样。