如何自定義 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'];

到目前為止，我無法找到任何與實現相關的內容，如果有人可以幫助我解決這個問題，那將非常有幫助。 我已經嘗試過使用條形圖進行水平的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] }));
  });
}

還要從canvas刪除[labels]="lineChartLabels" ，以點格式定義數據時[labels]="lineChartLabels" 。

不幸的是， ng2-charts無法處理這種配置，並為數據點和圖例標簽顯示錯誤的顏色。 因此，我還必須從canvas刪除[colors]="lineChartColors"並在數據集上定義顏色。 您可能必須擺脫這個包裝庫並直接使用 Chart.js 以獲得預期的結果。

請在此StackBlitz 中查看您修改后的代碼。