彩票走势图

如何使用DevExtreme图表控件 - 自定义轴位置?

翻译|使用教程|编辑:龚雪|2022-06-28 10:15:15.573|阅读 116 次

概述:本文主要介绍如何使用B/S端界面控件DevExtreme 的图表控件自定义轴,欢迎下载最新版体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

DevExtreme Charts控件附带了对轴定位逻辑的增强,开发人员可以在图表上的任何位置(不仅仅是它的边缘)定位轴并指定交点坐标。例如,此功能允许开发人员在滚动和缩放操作期间在固定位置创建象限图或显示轴。

DevExtreme v22.1正式版下载

自定义交点

通常,使用‘position’ 属性来指定必须渲染轴的边缘(默认情况下是左边缘和下边缘)。 在这种情况下,轴在可见范围角处相交,可见范围取决于数据点和滚动/缩放坐标。

在某些情况下,您可能希望将轴固定到其正交轴上的特定值。 要实现此要求,您可以使用“argumentAxis”和“valueAxis”配置对象的新属性。 在下面的示例中,轴固定在彼此的 0 点。

argumentAxis: {
customPosition: 0 // value at valueAxis
},
valueAxis: {
customPosition: 0 // value at argumentAxis
}
如何使用DevExtreme图表控件 - 自定义轴位置?
轴偏移

对于某些使用场景,您可能需要在独立于当前缩放级别和滚动位置的固定位置显示轴,可以使用新的 选项来指定相对于其原始交点的轴坐标(以像素为单位)。在下面的示例中,轴始终在图表可见范围的中心相交:

argumentAxis: {
offset: -200 // a half of visible range height
},
valueAxis: {
offset: 390 // a half of visible range width
}
如何使用DevExtreme图表控件 - 自定义轴位置?
支持多轴

如果您的图表包含多个数值轴,可以使用选项设置相关数值轴的名称,可以按如下方式使用它:

argumentAxis: {
customPosition: -10,
customPositionAxis: "leftAxis"
},
valueAxis: [{
position: "right"
},{
position: "left",
name: "leftAxis"
}]
如何使用DevExtreme图表控件 - 自定义轴位置?

DevExtreme | 下载试用

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。


DevExpress技术交流群6:600715373      欢迎一起进群讨论

DevExpress企业定制服务

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP