使用AntV/G2/G2Plot 如何优化图表体验
发布网友
发布时间：2024-09-27 12:47
共1个回答
热心网友
时间：2024-09-28 05:33
支持25+种常用统计图表，80%的图表在复杂BI、LowCode产品中得到验证，97%的代码单测覆盖率，以及5+位积极社区成员。
在v2版本中，我们将通用体验优化从业务实现中提取出来，实现了通用化配置，并将大部分体验优化方案内置到G2中。这样，G2和G2Plot的用户都可以直接通过配置和选项来开启各个图表的体验优化，方便地使用默认内置的体验优化和优化方案。
本文将针对业务中常见的图表体验问题，以及如何在G2/G2Plot中解决这些问题进行详细介绍。
TL;DR：如果你不熟悉可视化也不打算深入研究，只想简单高效地满足业务的基本图表需求，可以直接使用G2Plot，提供最简化的基本配置即可。G2Plot会默认自动使用最优方案来优化图表中的大部分体验问题；如果你想更定制地解决遇到的体验问题，可以参考我们的文档，阅读配置项，来定制地在G2Plot和G2中解决体验问题。
图表组成组件解释：在介绍图表中常见的体验问题之前，我们先再次了解下图表的基本组件部分。一个典型的常规统计图表通常由以下部分组成：
文本标签体验问题：文本标签遮挡是业务中常见的问题之一。在G2Plot v2和G2中，我们提供了label layout配置来优化文本标签。
配置方式：在G2Plot中配置方式如下：
在G2中通过以下方式开启：
配置前后效果对比：
各类图形适用的layout：知道了如何使用layout来优化文本标签后，这里我们先列举和说明下G2/G2Plot目前内置的layout。
layout的组合使用：此外，文本标签的layout可以组合配置，可以按照自定义的顺序来依次对文本标签进行优化。
默认配置：在G2中，我们没有提供默认配置，文本标签的开启和优化都需要手动开启。在G2Plot v2中，我们为每个图形配置了默认的最佳layout配置，如果你没有指定配置，则会自动使用默认配置。
坐标轴体验问题：在实际业务图表中，坐标轴也是体验问题之一。我们除了提供全面的样式配置外，还对轴标签提供了autoRotate、autoHide和autoEllipsis三种优化方式。
配置方式：在G2Plot中，对坐标轴标签的配置方式如下：
在G2中，配置方式如下：
autoRotate配置：autoRotate支持以下处理方法：
autoHide配置：autoHide支持以下处理方法：
autoEllipsis配置：autoEllipsis支持以下处理方法：
图例体验问题：图例位置：在G2Plot v2和G2中，均可以通过position属性来指定图例的位置。但对不同图形，我们建议针对性地指定图例的位置，这里的原则是缩短用户对照图例看图形的本能路径，提升信息获取效率。
图例翻页：当图例数量较多时，图例会占据图表大部分的位置，我们会自动开启分类图例的翻页功能。你也可以使用flipPage来控制翻页的开关。
总结：如果想简单高效，直接使用我们的默认建议，请直接使用G2Plot，提供最简化的基本配置即可。G2Plot会默认自动使用最优方案来优化图表中的大部分体验问题；如果需要定制针对性的解决体验问题，可以参考我们的文档指定适合你的配置。
