chart.js 的 Papaparse 不在 x 轴上显示 csv 值

Question

目前同时使用 papaparse 5.1 和 chart.js 3.5.1 在 X 轴上显示 15 分钟的间隔。这在 chart.js 的 v2 中有效，但现在它不会再在图表上显示 csv 的 'Time' 值。相反，它显示 0、2、4、6、8 等...

Time,8/18/2021,8/19/2021,8/20/2021
0:00,172202,160823,126604
0:15,170955,159931,123954
0:30,170269,159414,121677

看着'return value.toLocaleString();'我觉得我这里有问题？

https://imgur.com/a/LO2ch4A

$(document).ready(function() {
  $.get('data.csv', {'_': $.now()}, function(csvString) {

    var data = Papa.parse(csvString).data;
    var timeLabels = data.slice(1).map(function(row) { return row[0]; });

    var datasets = [];
    for (var i = 1; i < data[0].length; i++) {
      datasets.push(
        {
          label: data[0][i], // column name
          data: data.slice(1).map(function(row) {return row[i]}), // data in that column
          fill: false, // `true` for area charts, `false` for regular line charts
          pointStyle: 'line'
        }
      )
    }

    // Get container for the chart
    var ctx = document.getElementById('chart-container').getContext('2d');

    new Chart(ctx, {
      type: 'line',

      data: {
        labels: timeLabels,
        datasets: datasets,
      },

      options: {
        maintainAspectRatio: false,
        scales: {
          x: {
            title: {
              display: true,
              text: X_AXIS
            },
            grid: {
              display: false,
            },
            ticks: {
              maxTicksLimit: 60,
              callback: function(value, index, values) {
                return value.toLocaleString('en-US');
              }
            }
          },
          y: {
            stacked: false, // `true` for stacked area chart, `false` otherwise
            beginAtZero: true,
            title: {
              display: true,
              text: Y_AXIS
            },
            grid: {
              display: true,
            },
            ticks: {
              maxTicksLimit: 10,
              beginAtZero: true,
              callback: function(value, index, values) {
                return value.toLocaleString()
              }
            }
          }
        },
        tooltips: {
          callbacks: {
            label: function(tooltipItem, all) {
              return all.datasets[tooltipItem.datasetIndex].label
                + ':' + tooltipItem.yLabel.toLocaleString();
            }
          }
        },
        plugins: {
          legend: {
              labels: {
                usePointStyle: true,
              },
            display: true,
          },
          title: {
            display: true,
            text: TITLE,
            fontSize: 14,
          },
          colorschemes: {
            scheme: 'office.Frame6'
          }
        }
      }
    });

  });

});


  [1]: https://i.stack.imgur.com/oFPdX.png

Answer 1

因为你没有改变 x 轴的比例类型它是 category 比例，类别比例使用刻度的索引作为内部数据格式所以你没有得到你的标签，得到您需要根据 docs tip:

进行回调的标签

callback: function(value, index, values) {
  return this.getLabelForValue(value).toLocaleString('en-US');
}

chart.js 的 Papaparse 不在 x 轴上显示 csv 值

Papaparse with chart.js not displaying csv value on the x axis

javascript

papaparse

chart.js