Chart.js 折线图：12 月和 1 月之间的差距

Question

我有一个折线图，显示了历年cumulative data的月度动态，每年从0开始。

如何在每年的 12 月和 1 月之间做一个间隔？换句话说，只有当值增加时，如何连接点？

有一个选项可以添加空数据并使用 spangaps，但这是最后一个选项。

Answer 1

您可以搜索最小和最大日期并创建包含所有可用日期的字典，对于不可用的数据，您可以将其设置为空

const data = [
  {
    date: "2019-12-01T00:00:00",
    value: "50",
  },
  {
    date: "2020-01-01T00:00:00",
    value: "10",
  },
];

const dataDates = data.map(({ date, ...rest }) => ({ ...rest, date: new Date(date) }));

const minDate = Math.min(...dataDates.map(({ date }) => date.getTime()));
const maxDate = Math.max(...dataDates.map(({ date }) => date.getTime()));

const dataDictionary = dataDates.reduce((acc, { date, ...rest }) => {
  const dateKey = date.getTime();
  acc[dateKey] = { date, ...rest };

  return acc;
}, {});

const chartJsData = [];

let currentDate = minDate;

while (currentDate <= maxDate) {
  if (dataDictionary[currentDate])
    chartJsData.push(dataDictionary[currentDate]);
  else
    chartJsData.push({ date: new Date(currentDate), value: null });

  // Increment date with 1 month
  currentDate = currentDate + 1000 * 60 * 60 * 24 * 30;
}

console.log(chartJsData)

Chart.js 折线图：12 月和 1 月之间的差距

Chart.js line chart: gap between December and January

charts

chart.js

angular