You need to enable JavaScript to run this app.
导航
双轴图
最近更新时间:2024.09.05 20:32:31首次发布时间:2021.02.23 10:41:59

1. 概述

双轴图是指数据共用一个 X 轴,同时有多个 Y 轴的数据图表,实际应用中多为柱状图+折线图的结合。产品提供了多样化的双轴图组件,可以灵活配置图表类型、线条样式和排列方式等。

2. 快速入门

2.1 常用使用场景

在双轴图中,数据的显示会更为直观。双轴图可以分析两个不同指标的数据在同一维度下有何关联;也适用于分析不同数据的走势对比、同环比对比等场景。
例如,想要在同一张图上查看“订单量”和“订单金额”,常常因为数值之间的巨大差距无法很好的体现数据的区分度,双轴图可以解决不同指标量级的差异,左轴衡量[订单量],右轴衡量[销售价格]。
双轴图示例
图片

2.2 使用过程示例

第一步 点击选择/拖入 维度、指标、次轴指标,以及选择筛选条件
图片
第二步 点击双轴图图标,系统会默认画出一个双轴图,Y 轴-主轴为柱状图,Y 轴-次轴为折线图
图片
第三步 按需修改图表格式
图片

3. 功能介绍

3.1 双轴图图标

图片

3.2 配置规则

  • 维度:支持 N 个维度,第 1 个维度是 X 轴维度;后面的维度为颜色维度。
  • 指标:Y 左轴,可支持多个指标
  • 指标次轴:Y 右轴,可支持多个指标,指标和指标次轴的字段可以对调
    图片

3.3 编辑颜色

可以给双轴图设置相应的颜色,产品内置多种配色方案。
图片
也可以支持自定义配色方案

3.4 图表类型

双轴图的主轴和次轴都提供 4 种图表类型,可在[图表类型]处进行切换。

  • 主轴为堆叠柱状图,次轴为折线图
    图片
  • 主轴为折线图,次轴为面积图
    图片

3.5 线条样式

  • 线型:可以选择折线、平滑,线条的粗、细,以及实线、虚线、点线;
  • 标记:可以选择无标记点、空心圆、实心圆、正方形、菱形,以及选择标记的大小。

图片

3.6 排列方式

可勾选是否开启指标并列。

  • 是,如下图:图片
  • 否,如下图:图片

3.7 X轴

  • X轴:点击 X 轴右侧的开关按钮,选择显示或者不显示 X 轴信息;
  • 轴名称勾选框:可以勾选或取消勾选,勾选后可以修改名称,默认为字段的名称;
  • 轴名称(灰色):可设置文字大小、文字颜色;
  • 轴标签:可设置文字大小、文字大小、文字倾斜角度(0-360 度);
  • 轴线:可设置轴线的颜色;
  • 缩略图:可用于横向或纵向缩放图表。
    图片

3.8 Y 轴-主轴/次轴

图片

  • Y轴-主轴/次轴:点击 Y 轴-主轴/次轴右侧的开关按钮,选择显示或者不显示 Y轴-主轴 信息;
  • 轴名称:可以勾选或取消勾选,勾选后可以修改名称,默认为字段的名称;
  • 数轴范围:有 3 个选项,自动、自动(不包含0)、指定范围
    • 自动:(负值,0,正值),包含0;
    • 自动(不包含0);
    • 指定范围:可手动输入最小值和最大值,输入的右边值要大于左边值,不能为空;
      图片
  • 数据格式 :点击可在弹窗中对数轴的标签数据格式进行设置。可设置为数字、百分比、千分比、原始值;
    图片
  • 数轴比例 :控制数轴的刻度显示比例,一般情况下为线性,亦可进行对数化处理,如log(base 2)即以 2 底取对数,一般适用于同轴两个指标数值差异过大的运维监控等场景;
  • 数轴格式:指的是对数轴的标签数据格式进行设置。可设置为数字、百分比、千分比、原始值;
  • 轴名称(灰色):可设置文字大小、文字颜色;
  • 轴标签:可设置文字大小、文字大小、文字倾斜角度(0-360 度);
  • 轴线:可设置轴线的颜色。

3.9 网格线

参见可视化查询分析-图表-柱状图-网格线

3.10 特殊值

参见可视化查询分析-图表-柱状图-特殊值

3.11 图例、标签

图例:

  • 可点击右侧的开关按钮,选择显示或者不显示图例信息;
  • 可设置图例在图表中的显示位置,上方、下方、左侧、右侧。
  • 可设置图例的对齐方式:顶部/左侧对齐、居中对齐、底部/右侧对齐。
  • 可设置图例的最大列数和字体及颜色。
    图片

标签:
基本配置可参见可视化查询分析-图表-折线图-标签
双轴图支持将标签显示为百分比,点击百分比旁设置按钮,可设置小数位数和前后缀。
图片

3.12 提示信息

参见可视化查询分析-图表-柱状图-提示信息

3.13 显示模式

参见可视化查询分析-图表-柱状图-显示模式

3.14 图内控件样式

参见可视化查询分析-图表-表格-图内控件样式

3.15 恢复默认设置

点击[恢复默认设置],则上述图表配置中的内容都会恢复默认

3.16 透视

参见可视化分析-透视图表