自定义ChartJS标签以使用文本和日期

m1m5dgzv  于 2023-06-05  发布在  Chart.js
关注(0)|答案(1)|浏览(506)

我试图在ChartJs中格式化时间笛卡尔X轴标签,以显示不仅仅是更新日期,并且我特别寻找一种格式,即沿着“从DDMMYY - DDMMYY”或“DDMMYY -DDMMY”的路线,我已经查看了所有提供的Chartjs示例,它们都只是一个单一的格式化日期,是否有可能将标签更新为我提到的样式?下面是我正在尝试做的事情(忽略日期是递减的,这张照片只是标签应该如何看的一个例子):

对不起,我用了一个糟糕的例子,但它真的只是MMDD-MM-DD的UI风格。目前,我有正确数量的数据刻度,包括选定期间内的开始日期和结束日期,但日期仅显示为结束日期标签,并且我还看到一个刻度,无论开始值是什么。我想过滤掉开始值刻度,这样只呈现结束日期刻度,而不是标签用于单个日期,我希望它是整个星期,而不是4月2日的数据点,以及4月9日的数据点,我只想显示4月9日的数据点,并具有4月2日至4月9日的标签。

hjqgdpho

hjqgdpho1#

你可以在本周的第一个星期一之前巩固每个数据点。
现在您所拥有的是一个类别图表,您可以在其中为自定义标签选择自己的格式。

const ctx = document.getElementById('myChart');

const dateFormatter = new Intl.DateTimeFormat('en-US', {
  month: 'short',
  day: '2-digit'
});

const rawData = `
2023-05-28T12:00:00Z 1
2023-05-22T12:00:00Z 1
2023-05-21T12:00:00Z 2
2023-05-15T12:00:00Z 1
2023-05-14T12:00:00Z 1
2023-05-08T12:00:00Z 3
2023-05-07T12:00:00Z 2
2023-05-01T12:00:00Z 3
2023-04-30T12:00:00Z 6
2023-04-24T12:00:00Z 1
`;

// Ungrouped data
const parsedData = rawData.trim().split('\n').map((line) => {
  const [timestamp, value] = line.split(' ');
  return { x: new Date(timestamp), y: +value };
});

const findClosestMonday = (date) => {
  const closestMonday = new Date(date.getTime());
  while (closestMonday.getDay() !== 1) {
    closestMonday.setDate(closestMonday.getDate() - 1);
  }
  closestMonday.setHours(0);
  closestMonday.setMinutes(0);
  closestMonday.setSeconds(0);
  closestMonday.setMilliseconds(0);
  return closestMonday;
};

// Grouped by closest Monday
const consolidatedData = parsedData.reduce((groups, { x, y }) => {
  const key = findClosestMonday(x).toLocaleDateString();
  groups[key] = (groups[key] ?? 0) + y;
  return groups;
}, {});

const finalData = Object.entries(consolidatedData)
    .map(([timestamp, y]) => ({ x: new Date(timestamp), y }))
  .sort(({ x: x1 }, { x: x2 }) => x2 - x1); // DESC

const customLabels = finalData.map(({ x }) => {
  const curr = new Date(x.getTime());
  let label = dateFormatter.format(curr);
  curr.setDate(curr.getDate() + 6);
  label += ` - ${dateFormatter.format(curr)}`;
  return label;
});

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: customLabels,
    datasets: [{
      label: 'Series',
      data: finalData,
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});
<div>
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

相关问题