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

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

我的数据如下所示：

[
  { 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 }
]

标签中的收入日期为2020-02-24和2020-03-24

和

其余日期均为费用

这是我的数据集：

{
    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 ],
      }
    ]
  };

---

您不能定义

数据。标签

，因为这两个数据集都考虑它们。相反，应该使用包含

x

和

y

属性的对象分别定义每个数据点

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

在下面的可运行代码片段中，我使用and从基本数据数组构建了单个数据集的

数据


const数据=[
{日期：'2020-02-24'，类型：'income'，金额：900}，
{日期：'2020-03-15'，类型：'expense'，金额：100}，
{日期：'2020-03-20'，类型：'expense'，金额：830}，
{日期：'2020-03-25'，类型：'expense'，金额：50}，
{日期：'2020-03-28'，类型：'expense'，金额：560}，
{日期：'2020-03-24'，类型：'income'，金额：600}
];
var worldChart=新图表（document.getElementById（'myChart'）{
键入：“行”，
数据：{
数据集：[
{
标签：“费用”，
填充：假，
线张力：0.5，
背景颜色：“rgba（75192192,1）”，
边框颜色：“rgba（0,0,0,1）”，
边界宽度：2，
data:data.filter（o=>o.type=='expense'）.map（o=>（{x:o.date，y:o.amount}））
},
{
标签：“收入”，
填充：假，
线张力：0.5，
背景颜色：“蓝色”，
边框颜色：“红色”，
边界宽度：2，
data:data.filter（o=>o.type=='income'）.map（o=>（{x:o.date，y:o.amount}））
}
]
},
选项：{
回答：是的，
标题：{
显示：假
},
比例：{
xAxes：[{
键入：“时间”，
时间：{
单位：'天'，
tooltipFormat:'MMM DD'
}
}],
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});

请添加您想要的结果的屏幕截图“跳过”是一个有点笼统的术语（没有更多数据很难回答）。得到答案了吗。谢谢塔克斯伸出援助之手：）非常感谢！这帮了大忙：）很高兴我能帮上忙。