激情五月婷婷综合网,成人国产日韩,婷婷五月激情网

如何使用DevExtreme圖表控件 - 自定義軸位置？

翻譯|使用教程|編輯：龔雪|2022-06-28 10:15:15.573|閱讀 197 次

概述：本文主要介紹如何使用B/S端界面控件DevExtreme 的圖表控件自定義軸，歡迎下載最新版體驗(yàn)！

DevExtreme Charts控件附帶了對軸定位邏輯的增強(qiáng)，開發(fā)人員可以在圖表上的任何位置（不僅僅是它的邊緣）定位軸并指定交點(diǎn)坐標(biāo)。例如，此功能允許開發(fā)人員在滾動和縮放操作期間在固定位置創(chuàng)建象限圖或顯示軸。

DevExtreme v22.1正式版下載

自定義交點(diǎn)

通常，使用‘position’ 屬性來指定必須渲染軸的邊緣（默認(rèn)情況下是左邊緣和下邊緣）。在這種情況下，軸在可見范圍角處相交，可見范圍取決于數(shù)據(jù)點(diǎn)和滾動/縮放坐標(biāo)。

在某些情況下，您可能希望將軸固定到其正交軸上的特定值。要實(shí)現(xiàn)此要求，您可以使用“argumentAxis”和“valueAxis”配置對象的新屬性。在下面的示例中，軸固定在彼此的 0 點(diǎn)。

argumentAxis: {
customPosition: 0 // value at valueAxis
},
valueAxis: {
customPosition: 0 // value at argumentAxis
}

軸偏移

對于某些使用場景，您可能需要在獨(dú)立于當(dāng)前縮放級別和滾動位置的固定位置顯示軸，可以使用新的選項(xiàng)來指定相對于其原始交點(diǎn)的軸坐標(biāo)（以像素為單位）。在下面的示例中，軸始終在圖表可見范圍的中心相交：

argumentAxis: {
offset: -200 // a half of visible range height
},
valueAxis: {
offset: 390 // a half of visible range width
}

支持多軸

如果您的圖表包含多個數(shù)值軸，可以使用選項(xiàng)設(shè)置相關(guān)數(shù)值軸的名稱，可以按如下方式使用它：

argumentAxis: {
customPosition: -10,
customPositionAxis: "leftAxis"
},
valueAxis: [{
position: "right"
},{
position: "left",
name: "leftAxis"
}]

DevExtreme | 下載試用

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

DevExpress技術(shù)交流群6：600715373 歡迎一起進(jìn)群討論