在之前的版本中，官方技術(shù)團隊為DevExtreme圖表引入了注釋支持。在v20.1版本中，繼續(xù)擴展了對Polar Chart（雷達圖）注釋的支持，現(xiàn)在可以根據(jù)需要應(yīng)用文本、圖像或自定義注釋。創(chuàng)建注釋后，可以將其附加到Polar Chart（雷達圖）元素(例如一個序列點)或在特定坐標上顯示它。

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

本文中描述的新功能可以在DevExtreme支持的所有平臺上使用，包括Angular, Vue, React, jQuery，ASP. NET MVC和ASP. NET Core。

DevExtreme v22.2正式版下載

DevExpress技術(shù)交流群8：523159565      歡迎一起進群討論

注釋類型

要在Polar Chart（雷達圖）中顯示注釋，請使用新的“annotations”選項(接受一個表示單個注釋的配置對象數(shù)組)，每個對象都包含一個type屬性。支持的注釋類型包括' image '， ' text '和' custom '，根據(jù)所需的注釋類型，您的配置對象必須指定' image '， ' text '或' template '。

下面的示例列出了所有支持的注釋類型：

<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>

上述配置生成如下可視化：

注釋的位置

用戶可以將注釋附加到Polar Chart（雷達圖） UI元素上，也可以不將其固定在絕對坐標上，讓我們回顧一下與位置相關(guān)的選擇：

所屬的注釋

在下面的示例中，注釋沒有連接到任何Polar Chart（雷達圖） UI元素，它們使用絕對坐標。

annotations: [{
x: 350,
y: 140
}, {
angle: -100,
radius: 150
}]

錨定在參數(shù)上的注釋

annotations: [{
argument: "February",
value: 7
}]

錨定在系列點上的注釋

annotations: [{
argument: "March",
series: "Series 1"
}]

錨定在軸上的注釋

annotations: [{
argument: "May"
}, {
value: 15
}]

帶有混合錨定的注解

在這個示例中，像素和圖表坐標同時使用：

annotations: [{
argument: "May",
y: 320
}, {
value: 15,
x: 600
}]

常用注釋設(shè)置

要為所有注釋指定通用選項，使用'commonAnnotationsSettings '選項，下面的代碼示例為Polar Chart（雷達圖）上的所有注釋應(yīng)用背景和字體顏色(使用Angular標記)：

<dx-common-annotation-settings color="#5258c7">
<dxo-font color="#ffffff"></dxo-font>
</dx-common-annotation-settings>

基于單個注釋數(shù)據(jù)點的配置

Polar Chart（雷達圖）組件允許您通過' customizeAnnotation '回調(diào)函數(shù)定制單個注釋，這可以幫助那些希望從遠程數(shù)據(jù)服務(wù)獲得注釋數(shù)組的人。在下面的例子中，我們?yōu)閷儆凇癉ayTemperature”系列的注釋指定了一個背景顏色：

// 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;
}
}