Javascript 如何自定义y轴标签并从图表js中的x轴数据范围中随机选取值

我一直在使用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'];

到目前为止，我找不到任何与it相关的实现，如果有人能在这方面帮助我，那将非常有帮助。 我已经尝试了stackblitz与横条形图，我们需要像在折线图一样 下面是stackblitz

您需要使用图表并在每个数据集上定义选项

showLine:true

。此外，还必须将y轴定义为a，如下所示

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] }));
  });
}

同时从

画布中删除
[labels]=“lineChartLabels”
，以点格式定义数据时不需要这样做

然而不幸的是，
ng2图表
无法处理此配置，并为数据点和图例标签显示错误的颜色。因此，我还必须从
画布中删除
[colors]=“lineChartColors”
，并定义数据集上的颜色。
您可能必须去掉这个包装器库，直接使用Chart.js才能获得预期的结果

请看一看这段代码的修改。
感谢您提供解决方案，this.lineChartData.forEach（ds=>{ds.data=ds.data.map（（v，i）=>（{x:v，y:this.lineChartLabels[i]}））；}）；上述方法不适用于角度，而是使用动态数据转换散点图数据的方法。（图表数据集）