數(shù)據(jù)量規(guī)圖表組件

2024-01-22 17:11 更新

數(shù)據(jù)量規(guī)圖表組件,用于將數(shù)據(jù)展示為環(huán)形圖表。

說(shuō)明

申請(qǐng)媒體庫(kù)能相關(guān)權(quán)限該組件從API Version 8開(kāi)始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

無(wú)

接口

Gauge(options:{value: number, min?: number, max?: number})

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)名

參數(shù)類(lèi)型

必填

參數(shù)描述

value

number

量規(guī)圖的當(dāng)前數(shù)據(jù)值,即圖中指針指向位置。用于組件創(chuàng)建時(shí)量規(guī)圖初始值的預(yù)置。

說(shuō)明:

value不在min和max范圍內(nèi)時(shí)使用min作為默認(rèn)值。

min

number

當(dāng)前數(shù)據(jù)段最小值。

默認(rèn)值:0

max

number

當(dāng)前數(shù)據(jù)段最大值。

默認(rèn)值:100

說(shuō)明:

max小于min時(shí)使用默認(rèn)值0和100。

max和min支持負(fù)數(shù)。

屬性

除支持通用屬性外,還支持以下屬性:

名稱(chēng)

參數(shù)類(lèi)型

描述

value

number

設(shè)置量規(guī)圖的數(shù)據(jù)值,可用于動(dòng)態(tài)修改量規(guī)圖的數(shù)據(jù)值。

默認(rèn)值:0

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

startAngle

number

設(shè)置起始角度位置,時(shí)鐘0點(diǎn)為0度,順時(shí)針?lè)较驗(yàn)檎嵌取?/p>

默認(rèn)值:0

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

endAngle

number

設(shè)置終止角度位置,時(shí)鐘0點(diǎn)為0度,順時(shí)針?lè)较驗(yàn)檎嵌取?/p>

默認(rèn)值:360

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

colors

Array<ColorStop>

設(shè)置量規(guī)圖的顏色,支持分段顏色設(shè)置。

默認(rèn)值:Color.Black

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

strokeWidth

Length

設(shè)置環(huán)形量規(guī)圖的環(huán)形厚度。

默認(rèn)值:4

單位:vp

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

說(shuō)明:

設(shè)置小于0的值時(shí),按默認(rèn)值顯示。

不支持百分比。

ColorStop

顏色斷點(diǎn)類(lèi)型,用于描述漸進(jìn)色顏色斷點(diǎn)。

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

名稱(chēng)

類(lèi)型定義

描述

ColorStop

[ResourceColor, number]

描述漸進(jìn)色顏色斷點(diǎn)類(lèi)型,第一個(gè)參數(shù)為顏色值,若設(shè)置為非顏色類(lèi)型,則置為黑色。第二個(gè)參數(shù)為顏色所占比重,若設(shè)置為負(fù)數(shù)或是非數(shù)值類(lèi)型,則將比重置為0。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct GaugeExample {
  5. build() {
  6. Column({ space: 20 }) {
  7. // 使用默認(rèn)的min和max為0-100,角度范圍默認(rèn)0-360,value值設(shè)置
  8. // 參數(shù)中設(shè)置當(dāng)前值為75
  9. Gauge({ value: 75 })
  10. .width(200).height(200)
  11. .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
  12. // 參數(shù)設(shè)置當(dāng)前值為75,屬性設(shè)置值為25,屬性設(shè)置優(yōu)先級(jí)高
  13. Gauge({ value: 75 })
  14. .value(25) // 屬性和參數(shù)都設(shè)置時(shí)以屬性為準(zhǔn)
  15. .width(200).height(200)
  16. .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
  17. // 210--150度環(huán)形圖表
  18. Gauge({ value: 30, min: 0, max: 100 })
  19. .startAngle(210)
  20. .endAngle(150)
  21. .colors([[0x317AF7, 0.1], [0x5BA854, 0.2], [0xE08C3A, 0.3], [0x9C554B, 0.4]])
  22. .strokeWidth(20)
  23. .width(200)
  24. .height(200)
  25. }.width('100%').margin({ top: 5 })
  26. }
  27. }

以上內(nèi)容是否對(duì)您有幫助:
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)