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

问题描述

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

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

到目前为止，我找不到与实现相关的任何信息，如果有人可以帮助我，这将非常有帮助。 我已经尝试过使用水平条形图进行水平堆叠，我们需要像LINE CHART一样 这是stackblitz link

解决方法

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

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

由于散点图需要point format中的数据，因此必须在ngOnInit方法中生成适当的数据结构，如下所示：

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

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

不幸的是，ng2-charts无法应付这种配置，并为数据点和图例标签显示错误的颜色。因此，我还必须从[colors]="lineChartColors"中删除canvas并在数据集中定义颜色。 您可能必须摆脱此包装器库，而直接使用Chart.js才能获得预期的结果。

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