如何自定义y轴标签并在Chart-js中从x轴的数据范围中随机选择值

Question

我一直在使用charts.js制作一张图表，显示每天的锻炼持续时间。y轴应具有日期，x轴应具有系列的持续时间，这是我的数据集：

public lineChartData: ChartDataSets[] = [
{ data: [65, 19, 40, 81, 56, 5, 40], label: 'Series A' },
{ data: [95, 69, 40, 81, 56, 96, 40], label: 'Series B' },
{ data: [65, 74, 40, 41, 54, 55, 40], label: 'Series C' }
];
public lineChartLabels: Label[] = ['2020/05/20', '2020/05/21', '2020/05/22', '2020/05/23', '2020/05/24', '2020/05/25'];

到目前为止，我还找不到任何与之相关的实现，如果有人能帮助我，那将是非常有帮助的。我试过用条形图水平堆叠，我们需要像折线图一样这里是堆叠链路

Answer 1

您需要使用scatter图表，并在每个数据集上定义选项showLine: true。此外，您必须将y轴定义为时间笛卡尔轴，如下所示。

yAxes: [
{
type: "time",
time: {
parser: "YYYY/MM/DD",
unit: "day",
displayFormats: {
day: "YYYY/MM/DD"
}
},
ticks: {
reverse: true
}       
}
]

由于散点图期望数据为点格式，因此必须在ngOnInit方法中生成适当的数据结构，如下所示：

ngOnInit() {
this.lineChartData.forEach(ds => {
ds.data = ds.data.map((v, i) => ({ x: v, y:  this.lineChartLabels[i] }));
});
}

还要从canvas中删除[labels]="lineChartLabels"，在以点格式定义数据时不需要这样做。

遗憾的是，ng2-charts无法处理此配置，并且数据点和图例标签显示错误的颜色。因此，我还必须从canvas中删除[colors]="lineChartColors"，并定义数据集上的颜色。您可能需要去掉这个包装器库，直接使用Chart.js才能获得预期的结果。

请查看您在此StackBlitz中修改的代码。