Chart js 如何自定义 y 轴标签并从数据范围内随机选择 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'];到目前为止，我找不到任何与实现相关的东西，如果有人能帮助我解决这个问题，那将非常有帮助。我已经尝试过水平条形图的 stackblitz，我们需要像 LINE CHART 中的一样这里是 stackblitz链接

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

  });

}

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

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

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