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

Chart js 如何自定義 y 軸標(biāo)簽并從數(shù)據(jù)范圍內(nèi)隨機(jī)選擇 x 軸的值

JavaScript

胡說(shuō)叔叔 2023-03-03 09:22:33

我一直在使用 charts.js 制作圖表，顯示每天的鍛煉持續(xù)時(shí)間。y 軸應(yīng)該有日期，x 軸應(yīng)該有系列的持續(xù)時(shí)間，這是我的數(shù)據(jù)集： 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'];到目前為止，我找不到任何與實(shí)現(xiàn)相關(guān)的東西，如果有人能幫助我解決這個(gè)問題，那將非常有幫助。我已經(jīng)嘗試過水平條形圖的 stackblitz，我們需要像 LINE CHART 中的一樣這里是 stackblitz鏈接

查看完整描述

1 回答

POPMUISE

TA貢獻(xiàn)1765條經(jīng)驗(yàn) 獲得超5個(gè)贊

您需要使用scatter圖表并在每個(gè)數(shù)據(jù)集上定義選項(xiàng)showLine: true。此外，您必須將 y 軸定義為時(shí)間笛卡爾軸，如下所示。

yAxes: [

{

type: "time",

time: {

parser: "YYYY/MM/DD",

unit: "day",

displayFormats: {

day: "YYYY/MM/DD"

}

},

ticks: {

reverse: true

}

]

由于散點(diǎn)圖需要點(diǎn)格式的數(shù)據(jù)，因此您必須在ngOnInit方法中生成適當(dāng)?shù)臄?shù)據(jù)結(jié)構(gòu)，如下所示：

ngOnInit() {

this.lineChartData.forEach(ds => {

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

});

}

[labels]="lineChartLabels"也從中刪除canvas，以點(diǎn)格式定義數(shù)據(jù)時(shí)不需要。

不幸的是，ng2-charts無(wú)法處理此配置并為數(shù)據(jù)點(diǎn)和圖例標(biāo)簽顯示錯(cuò)誤的顏色。因此，我還必須[colors]="lineChartColors"從canvas數(shù)據(jù)集上刪除并定義顏色。您可能不得不擺脫這個(gè)包裝器庫(kù)并直接使用 Chart.js 以獲得預(yù)期的結(jié)果。

請(qǐng)查看您在此StackBlitz中修改后的代碼。

反對(duì) 回復(fù) 2023-03-03