023-68661681
返回
AG Grid成立于英国，致力于提供优秀的企业级数据表格及图表解决方案。
AG Grid及AG Charts是其两大主要的高性能企业级JavaScript数据表格及图表解决方案，被全球开发者广泛采用。广泛应用于金融、电信、制造等行业，支持 Angular、React、Vue 和纯 JavaScript 项目，拥有企业级的性能与功能深度，凭借其卓越的性能、丰富的功能与高度可定制性，成为构建复杂数据驱动型应用的优选工具库。近日，AG Charts 正式发布13版本，改进了大型分类数据集的可视化方式，引入了新的柱形宽度控制选项和用于浏览密集图表的内置滚动条。此版本还扩展了状态 API，使其更容易响应和复现用户交互：
主要更新内容
- 系列条形宽度定制 - 一系列用于定制和使用可变宽度条形的新选项。
- 实际值与目标值对比柱状图 - 通过柱状图将实际值与目标基准进行比较，直观地展示进度。
- 滚动条 - 新增滚动条功能，方便用户浏览大型分类数据集，同时又不影响可读性。
- 活动项目状态 - 扩展状态 API，包含当前活动项目，使响应用户事件更加容易。
系列条形宽度定制
AG Charts 13.1 引入了几种配置和管理图表中柱形宽度的新方法，使您可以标准化不同数据集大小的视觉效果，从而使比较更加直观。
固定宽度条
第一个新选项允许您为图表中的条形应用固定宽度（以像素为单位定义）——缩小条形可以增加当前视图中的数据量，或者放大条形，使用户能够使用新的滚动条功能浏览数据集：
要定义固定宽度，请为该series.width属性提供一个像素值：
const series = [
{
type: 'bar',
width: 30, // Fixed bar width in px
}
]
宽度比条
您还可以将柱状图宽度定义为其默认大小的比例，这在跨数据集进行比较时特别有用：
可以通过以下选项配置条形宽度比例 series.widthRatio：
const series = [
{
type: 'bar',
widthRatio: 0.4, // Relative to default size
}
];
和选项可用于条形图width、箱线图、范围条形图和瀑布图系列 widthRatio。
波段排列
除了配置柱状图宽度外，现在还可以控制柱状图的对齐方式。
图表中的柱状图可以设置为全图对齐，也可以设置为与坐标轴的起点、中心或终点对齐。这样可以确保无论数据集大小或柱状图宽度如何，图表都能呈现出预期的效果。
要配置图表中柱形图的对齐方式，请将“类别”、“序数时间”或 “单位时间”bandAlignment 轴上的 axes 选项 的值设置 为以下值之一：，，，或：startcentreendjustified
{
axes: {
x: {
type: 'category',
bandAlignment: 'start', // or 'center', 'end', 'justified'
},
},
}
示例：实际柱状图与目标柱状图
借助新的柱形宽度功能，您现在可以创建显示实际柱形与目标柱形的图表，从而轻松可视化目标完成进度：
在上面的示例中，各个系列未分组，因此看起来是重叠的。“实际”系列的宽度比为 0.7，而“合格”和“优秀”目标系列是堆叠的，宽度比为 1:
series: [
{
type: "bar",
direction: 'horizontal'
xKey: "quarter",
yKey: "quota",
fillOpacity: 0.3,
stacked: true,
grouped: false,
},
{
type: "bar",
direction: 'horizontal'
xKey: "quarter",
yKey: "stretch",
fillOpacity: 0.3,
stacked: true,
grouped: false,
},
{
type: "bar",
direction: 'horizontal'
xKey: "quarter",
yKey: "actual",
grouped: false,
widthRatio: 0.7,
},
],
滚动条
AG Charts 13.1 中引入了滚动条。滚动条为图表提供了内置的水平和垂直滚动功能，使用户能够在不减小图表大小或降低可读性的情况下浏览大型数据集：
要启用滚动条，请将选项设置scrollbar.enabled为true：
{
scrollbar: {
enabled: true,
},
}
启用后，滚动条会根据当前数据窗口的滚动方向显示在可滚动区域内，但可通过scrollbar图表选项进行配置。此选项允许自定义所有滚动条的位置和样式，并且水平和垂直滚动条的样式分别可通过 `override`scrollbar.horizontal 和 `override` scrollbar.vertical 属性进行设置。
活动项目状态和事件
AG Charts 13.1 扩展了状态 API，新增了一个active状态属性，用于公开当前活动的图表元素（例如柱状图或图例项），从而更轻松地响应用户输入——监听activeChange事件，从状态对象中获取当前活动项，并根据用户交互应用智能操作：
您可以通过调用对图表的引用来访问当前活动的元素getState()，该引用将包含活动元素，例如：
console.log(chartRef.getState());
会打印：
{
active: {
activeItem: {
itemId: 4,
seriesId: "BarSeries-#", // or pre-configured series id
type: "series-node" // or legend-item, etc..
}
// ...other state properties
}
概括
AG Charts 13.1 专注于改进大型分类数据集的可视化效果，提供对柱状图呈现、导航和用户交互的更佳控制。此版本：
- 引入固定和基于比例的条形宽度配置，以精确控制视觉密度和强调效果。
- 通过扩展条形宽度和分组选项，实现实际值与目标值条形等常见视觉模式。
- 添加内置的水平和垂直滚动条，以便在不影响可读性的情况下流畅地浏览大型数据集。
- 扩展状态 API 以公开当前活动的图表项，简化对用户交互的响应并提供对其的编程控制。
------------------------------------------------------------
关于慧都科技
慧都科技是一家行业数字化解决方案公司，长期专注于软件、油气与制造行业。公司基于深入的业务理解与管理洞察，以系统化的业务建模驱动技术落地，帮助企业实现智能化运营与长期竞争优势。在软件工程领域，我们提供开发控件、研发管理、代码开发、部署运维等软件开发全链路所需的产品，提供正版授权采购、技术选型、个性化维保等服务，帮助客户实现技术合规、降本增效与风险可控。慧都科技是AG Grid的在中国区的合作伙伴，AG Grid / AG Charts作为JavaScrip表格/图表领域的优秀产品，帮助企业实现轻松构建高性能的表格及图表。
获取产品优惠或试用AG Grid产品，请联系在线客服咨询，或拨打产品热线：023-68661681
发表评论