翻譯|使用教程|編輯:龔雪|2023-05-16 10:20:28.417|閱讀 131 次
概述:本文將為大家介紹界面控件DevExtreme如何完成雷達(dá)圖表的注釋操作,歡迎下載最新版體驗(yàn)~
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
在之前的版本中,官方技術(shù)團(tuán)隊(duì)為DevExtreme圖表引入了注釋支持。在v20.1版本中,繼續(xù)擴(kuò)展了對(duì)Polar Chart(雷達(dá)圖)注釋的支持,現(xiàn)在可以根據(jù)需要應(yīng)用文本、圖像或自定義注釋。創(chuàng)建注釋后,可以將其附加到Polar Chart(雷達(dá)圖)元素(例如一個(gè)序列點(diǎn))或在特定坐標(biāo)上顯示它。
DevExtreme擁有高性能的HTML5 / JavaScript小部件集合,使您可以利用現(xiàn)代Web開(kāi)發(fā)堆棧(包括React,Angular,ASP.NET Core,jQuery,Knockout等)構(gòu)建交互式的Web應(yīng)用程序,該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。
本文中描述的新功能可以在DevExtreme支持的所有平臺(tái)上使用,包括Angular, Vue, React, jQuery,ASP. NET MVC和ASP. NET Core。
DevExpress技術(shù)交流群8:523159565 歡迎一起進(jìn)群討論
要在Polar Chart(雷達(dá)圖)中顯示注釋?zhuān)?qǐng)使用新的“annotations”選項(xiàng)(接受一個(gè)表示單個(gè)注釋的配置對(duì)象數(shù)組),每個(gè)對(duì)象都包含一個(gè)type屬性。支持的注釋類(lèi)型包括' image ', ' text '和' custom ',根據(jù)所需的注釋類(lèi)型,您的配置對(duì)象必須指定' image ', ' text '或' template '。
下面的示例列出了所有支持的注釋類(lèi)型:
<dx-polar-chart> … <dxi-annotation image="http://sun.png " type="image" argument="July" series="Day"> </dxi-annotation> <dxi-annotation text="Custom text" type="text" [radius]="100" [angle]="45"> </dxi-annotation> <dxi-annotation template="template" type="custom" argument="October" [value]="17"> </dxi-annotation> <svg *dxTemplate="let annotation of 'template'"> <image attr. width="60" height="40" /> <text x="8" y="60" >and text</text> </svg> </dx-polar-chart>
上述配置生成如下可視化:
用戶(hù)可以將注釋附加到Polar Chart(雷達(dá)圖) UI元素上,也可以不將其固定在絕對(duì)坐標(biāo)上,讓我們回顧一下與位置相關(guān)的選擇:
在下面的示例中,注釋沒(méi)有連接到任何Polar Chart(雷達(dá)圖) UI元素,它們使用絕對(duì)坐標(biāo)。
annotations: [{
x: 350,
y: 140
}, {
angle: -100,
radius: 150
}]
annotations: [{
argument: "February",
value: 7
}]
annotations: [{
argument: "March",
series: "Series 1"
}]
annotations: [{
argument: "May"
}, {
value: 15
}]
在這個(gè)示例中,像素和圖表坐標(biāo)同時(shí)使用:
annotations: [{
argument: "May",
y: 320
}, {
value: 15,
x: 600
}]
要為所有注釋指定通用選項(xiàng),使用'commonAnnotationsSettings '選項(xiàng),下面的代碼示例為Polar Chart(雷達(dá)圖)上的所有注釋?xiě)?yīng)用背景和字體顏色(使用Angular標(biāo)記):
<dx-common-annotation-settings color="#5258c7"> <dxo-font color="#ffffff"></dxo-font> </dx-common-annotation-settings>
Polar Chart(雷達(dá)圖)組件允許您通過(guò)' customizeAnnotation '回調(diào)函數(shù)定制單個(gè)注釋?zhuān)@可以幫助那些希望從遠(yuǎn)程數(shù)據(jù)服務(wù)獲得注釋數(shù)組的人。在下面的例子中,我們?yōu)閷儆凇癉ayTemperature”系列的注釋指定了一個(gè)背景顏色:
// app.component.html
<dx-polar-chart ...
customizeAnnotation: "customizeAnnotation">
<dxi-annotation ...
series="DayTemperature"
text="Custom text 1">
</dxi-annotation>
<dxi-annotation ...
text="Custom text 2">
</dxi-annotation>
<dxi-annotation ...
text="Custom text 3">
</dxi-annotation>
<dxi-annotation ...
series="DayTemperature"
text="Custom text 4">
</dxi-annotation>
</dx-polar-chart>
// app.component.ts
//...
export class AppComponent {
customizeAnnotation(item) {
if (item.series === "DayTemperature") {
item.color = "#5258c7";
item.font = {
color: "#ffffff"
};
}
return item;
}
}
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)