已解決430363個問題，去搜搜看，總會有你想問的

Chart js 如何自定義 y 軸標簽并從數據范圍內隨機選擇 x 軸的值

首頁猿問 Chart js 如何自定義 y...

Chart js 如何自定義 y 軸標簽并從數據范圍內隨機選擇 x 軸的值

JavaScript

胡說叔叔 2023-03-03 09:22:33

我一直在使用 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鏈接

查看完整描述

1 回答

POPMUISE

TA貢獻1765條經驗獲得超5個贊

您需要使用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中修改后的代碼。

反對回復 2023-03-03

1 回答
0 關注
138 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Chart js 如何自定義 y 軸標簽并從數據范圍內隨機選擇 x 軸的值

Chart js 如何自定義 y 軸標簽并從數據范圍內隨機選擇 x 軸的值

1 回答

添加回答