--- url: /v6.2/charts-overview.md --- # 图表总览 图表类控件帮助数据人员对数据做即时探索和分析加工，更高效的发现数据中隐含的信息。 系统汇集了各种类型的图表，主要分为[指标类](kpi.md)、[柱状图](histogram.md)、[折线图](line-chart.md)、[关系图](relation.md)、[环形图](#环形图)、[折线图区域图](area-chart.md)、[地图](map-introduction.md)、[表格](table-intro.md)、[自定义图表](custom-charts.md)。 ## 图表示例 下面展示平台支持的图表示例。 ### 指标类图表 指标类图表包含 KPI 和仪表盘。 ![](/images/chart/charts-overview-002.png) 指标趋势卡则可以在查看指标总值的同时，展现指标的时间趋势。 ![](/images/chart/chart-metric-trend.png) ### 柱状图 柱状图类图表包含柱状图、分簇柱状图、分组分簇柱状图、堆叠柱状图、分组堆叠柱状图、百分比堆叠柱状图、百分比分组堆叠柱状图、环形柱状图。 ![](/images/chart/charts-overview-001.png) 此外还包含横向柱状图、横向分簇柱状图、横向堆叠柱状图、横向百分比堆叠柱状图。 ![](/images/chart/charts-overview-003.png) ### 环形图 环形图类图表包括环形图、饼图、南丁格尔图、旭日图。 ![](/images/chart/charts-overview-004.png) 环形图、饼图、南丁格尔图的标签展示支持配置换行展示，配置项默认为不勾选状态，当图表的标签项展示信息较多时，可开启该选项。 ![](/images/chart/charts-overview-020.png) ### 折线区域图 折线区域图类包括折线图、折线柱状图、分组折线图、区域图、分组区域图、堆叠区域图、分组堆叠区域图、百分比堆叠区域图、百分比分组堆叠区域图、河流区域图。 ![](/images/chart/charts-overview-005.png) ![](/images/chart/charts-overview-006.png) ### 关系图 关系图包括弧线关系图、漏斗图、热力图、雷达图、桑基图、和弦图、散点图。 ![](/images/chart/charts-overview-007.png) ### 其他 其他类图表包括进程图、树图、矩形树图、瀑布图、词云、箱线图、帕累托图、气泡图。 ![](/images/chart/charts-overview-008.png) ### 地图 地图类图表包括简易地图和分层地图。 ![](/images/chart/charts-overview-009.png) ### 表格 表格类图表包括表格、数据集表格、交叉表、画布表格等。 ![](/images/chart/charts-overview-010.png) ### 组合图表 组合图表可以添加任意数量的坐标轴，添加多个图元信息。 ### 自定义图表 自定义图表是通过编写 JS 代码实现的，与其他图表不同。 ![](/images/chart/charts-overview-015.png) ## 图表数据 ### 图表数据查询方式 图表数据展示时支持聚合查询、明细查询两种不同的查询方式。如学生成绩表所示，在表格中拖入学生姓名和成绩数据后，使用聚合查询可以展示学生的姓名和总成绩。 使用明细查询展示了学生的姓名和详细的成绩。 ![](/images/chart/charts-overview-016.png) * 聚合查询：数据在图表中以聚合的形态进行展示，如维度字段自动进行分组，日期维度字段支持选择年、月、日展示，维度字段支持合并项目、设置显示值，度量字段支持各种高级计算等。 * 明细查询：数据在图表中以明细数据进行展示，维度字段不支持分组，度量字段不能进行各种计算。 > 说明 > 图表创建时进行查询方式设置，每个图片只能选择一种查询方式，且配置后无法修改。 #### 字段计算方式 在图表的维度和度量中拖入字段，展示业务的相关信息。 在聚合查询方式下，图表中的字段可以使计算和以表达式编辑两种方式进行设置。 ![](/images/chart/charts-overview-016-0.png) * 字段计算 字段计算是系统自带的对维度和度量的处理方式。如维度字段自动进行分组，日期维度字段支持选择时间展示方式。度量字段可以选择计算方式，如求和、同环比等。 详见[维度计算](chart.md#计算)、[度量计算](chart.md#计算-1) * 字段以表达式编辑 当系统自带的维度和度量处理方式不能满足用户需求时，用户可以使用表达式对字段进行计算处理。 点击“以表达式编辑”，在界面中使用函数对字段进行编辑。 ![](/images/chart/charts-overview-016-2.png) ### 图表数据查询设置 当图表的数据比较大时，加载时间较长，在仪表盘展示因渲染时间长影响展示效果。为了满足这种情况，图表增加查询设置功能，用户需要的时候再进行数据加载。 * 预先查询：仪表盘展示时直接加载图表数据。 * 点击查询：仪表盘展示时不加载数据，点击开启后加载数据。 ![](/images/chart/charts-overview-017.png) ### 图表数据切换 图表生成后支持切换数据源，如果新的数据源中有相同的字段则可以直接生成图表，如果没有相同的字段，系统匹配失败，需要用户手动从切换后的数据源中选择字段拖入到图表的维度和度量信息，图表所需的字段都拖入后，按照新的数据生成图表。 ![](/images/chart/charts-overview-018.png) 图表数据切换除了选择数据源还支持选择字段匹配规则，可以使用字段名进行匹配，也支持使用别名进行匹配，匹配方式灵活，提高字段匹配率。 ![](/images/chart/charts-overview-019.png) 图表数据切换过程只替换了数据，图表原有的样式设置、交互设置都保留不变。 ## 图表常见操作 图表控件与其他控件不同，图表控件支持打开操作，在图表内进行交互。 从图表控件三点菜单打开按钮中进入图表内部。 图表打开时支持自动保存、撤销、重做、导出、刷新、嵌入、查看SQL代码等功能。 ### 自动保存 自动保存是指自动保存图表的操作。该功能默认勾选。 自动保存主要是使用户的操作都被保留，不会丢失。 在自动保存场景下，每一次操作，都会重新渲染图表。当图表包含大量数据时，渲染一次很耗时，在这种情况，开启自动保存会使图表制作出现卡顿情况，建议关闭自动保存功能。 此时手动保存功能，用户搭建图表过程中，手动保存触发图表渲染。 自动保存关闭时，会出现以下情况： * 图表界面出现暂停蒙层； * 用户不可以编辑字段/指标； * 将会取消正在进行的下钻； * 将会关闭已经打开的详细数据弹窗。 ![](/images/chart/charts-overview-011.png) ### 撤销/重做 打开图表时，可以点击撤销按钮取消对图表的操作，可以支持撤销多次操作。也支持对撤销的操作进行重做。 ### 导出 打开图表时，可以导出图表的 png、pdf 格式，也可以导出图表的聚合数据。 ![](/images/chart/charts-overview-012.png) ### 刷新 不使用图表缓存数据，而直接刷新图表数据。 ### 查看SQL代码 设计图表的时候需要使用到不同的数据，这些数据的计算有简单也有复杂，有时候在计算这些数据的时候后台的响应比较慢。查看SQL代码可以帮助用户了解后台执行的 SQL 是怎样的并且进行排查和优化的话。 查看SQL代码提供以下两个功能： 1. 查看 SQL 代码。 2. 查看 SQL 代码的执行计划的 explain 结果。 ![](/images/chart/charts-overview-013.png) 如果发现的某个图表执行性能不理想，首先可以查看执行的 SQL 代码是否合理，是否可以调整维度和度量的计算表达式。然后可以使用 explain 的功能查看执行计划。如果发现执行计划中某一些操作耗费的事件比较长，那么可以针对不同的情况，进行相应的优化工作。例如执行计划大部分事件都在重复的进行表的 scan 操作，那么可以考虑在相关表的相关列上建立一些索引以加快图表的执行。 ### 查看明细数据 图表中可以查看用户的原始数据，可以展示与图表相关列的数据，也可以展示所有列数据。 支持使用筛选查看的数据，支持导出数据。 ![](/images/chart/charts-overview-014.png)