如何在chartjs中的多线图中跳过线的标签？

Question

我正在尝试使用chartjs创建多线图。在x轴上我有日期，在y轴上我有一些整数。我有两条线，其中一条用于用户费用，另一条用于收入。对于收入，我只有2个日期的数据，但有月份差异。我在图表上的第二个收入点不在正确的日期，而是在下一个支出日期。

我的数据如下：

[
  { date: '2020-02-24', type: 'income', amount: 900 },
  { date: '2020-03-20', type: 'expense', amount: 100 },
  { date: '2020-03-20', type: 'expense', amount: 830 },
  { date: '2020-03-21', type: 'expense', amount: 50 },
  { date: '2020-03-22', type: 'expense', amount: 560 },
  { date: '2020-03-24', type: 'expense', amount: 600 }
]

In labels dates of income are 2020-02-24 and 2020-03-24和rest of the dates are of expenses

这是我的数据集：

{
    labels:[ "2020-02-24", "2020-03-20", "2020-03-20", "2020-03-21", "2020-03-22", "2020-03-24" ],
    datasets: [
      {
        label: 'Expenses',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data: [ 100, 830, 50, 560 ],
      },
      {
        label: 'Income',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'blue',
        borderColor: 'red',
        borderWidth: 2,
        data: [ 900, 600 ],
      }
    ]
  };

Answer 1

data: [
  { x: '2020-02-24', y: 900 }, 
  { x: '2020-03-24', y: 600 }
]

在下面的可运行代码片段中，我使用data和filter()在您的基本数据数组中构建了这样的filter()单个数据集。

 
map()
map()