Appearance
折线图
折线图是用直线线段将各数据点连接组成的图形,以折线方式可以直观地显示数据变化趋势。折线图常用来分析数据随时间的变化趋势,也可用来分析多组数据随时间变化的相互作用和相互影响。
例如,我们可用折线图来分析某类商品或是某几类相关的商品随时间变化的销售情况,从而进一步预测未来的销售情况。在折线图中,一般水平轴(X轴)用来表示时间的推移,并且间隔相同;而垂直轴(Y轴)代表不同时刻的数据的大小。
优势: 折线图易于理解,可用来分析多组数据随时间变化的相互作用和相互影响,并可即时感知趋势。
缺点: 在折线图中使用多个线形会导致折线图混乱,难以解释。因此,需避免使用两三个以上的度量。
设置项
数据设置
设置项 | 说明 |
---|---|
数据源 | 选择折线图数据来源,一个图表只能选择一个数据源,可通过在同一或不同X、Y轴下新增多个复合图表 |
坐标系类型 | 选择数据在哪种坐标轴下进行展示。 选项: 极坐标系 、二维的直角坐标系 ,极坐标补充详见文末 |
名称字段 | 选择数据源返回的字段,该字段用于折线图标签的名称显示,通常结合悬浮显示 菜单进行显示 |
横轴字段 | 在直角坐标系中,选择数据源 菜单返回的字段,将其设置为折线图的横坐标轴 |
纵轴字段 | 在直角坐标系中,选择数据源 菜单返回的字段,将其设置为折线图的纵坐标轴。 |
半径字段 | 在极坐标系中,选择数据源 菜单返回的字段,将其设置为极坐标的半径值 |
角度字段 | 在极坐标系中,选择数据源 菜单返回的字段,将其设置为极坐标的分组角度 |
图表设置
设置项 | 说明 |
---|---|
X坐标轴 | 选择折线图所在的横轴,可在横轴 菜单中添加多个X轴线 |
Y坐标轴 | 配置折线图所在的纵轴,可在纵轴 菜单中添加多个Y轴线 |
颜色分配类型 | 配置折线图中图形的颜色效果,选项:按照图表分配调色盘中的颜色 、按照数据项分配的调色盘中的颜色 。多个图表聚合时可选择按图表分配,单一图表可选择按数据项分配,具体色值可在 样式 菜单调色盘中调整 |
显示图形 | 配置是否启用在折线图对应数值点上展示图形标识 |
图形样式 | 选择折线图中各数值点图形的样式。 选项: 空心圆 、圆点 、矩形 、圆角矩形 、三角形 、菱形 、针头 、箭头 、无 |
图形大小 | 配置数值点图形的大小 |
图形旋转角度 | 配置数值点图形的旋转角度 |
显示为阶梯图 | 配置折线图的展示形式是否为阶梯 样式,优先级高于平滑曲线显示 。 |
平滑曲线显示 | 配置折线图的展示形式是否为平滑 曲线 |
标签设置
设置项 | 说明 |
---|---|
显示标签 | 开启或关闭折线图上的标签显示 |
显示内容表达式 | 可自定义编辑表达式语法,实现复杂场景内容显示,显示优先级低于【显示内容】 |
显示内容 | 可编辑标签显示内容,不支持除提示内容外的复杂表达式语法,显示优先级高于【显示内容表达式】 |
位置 | 可以选择标签在折线线条上的显示位置 |
距离图形的距离 | 设置标签距离折线图中数值点的距离 |
标签旋转 | 设置标签旋转的角度 |
文字偏移X | 设置标签距离X轴的距离 |
文字偏移Y | 设置标签距离Y轴的距离 |
颜色 | 设置标签文本的颜色 |
背景色 | 设置标签文本的背景色,需结合文字样式中行高、内边距、宽度、高度等参数一起使用方可生效 |
文字样式 | 设置标签文本为斜体或正常模式 |
字体粗细 | 设置标签字体粗细,选项:默认 、粗体 、非常粗 、细 |
字体 | 设置标签字体样式,选项:sans-serif 、serif 、monospace 、Arial 、Courier NEW |
字号 | 设置标签字号大小,字号不小于12,不得超过100 |
水平对齐 | 设置标签文字的水平对齐方式,包括自动、居左、居中、居右四种方式 |
垂直对齐 | 设置标签文字的垂直对齐方式,包括自动、顶部、居中、底部四种方式 |
行高 | 设置标签文本的行高高度,当文字超出宽度处理 选择了换行选项后可生效 |
内边距 | 设置标签文本在背景框内的距离长度 |
宽度 | 设置标签文本的最大显示宽度,一般需结合超出宽度处理 做换行等配置 |
高度 | 设置标签文本的显示高度,仅影响文本背景高度,不影响文字本身显示 |
超出宽度处理 | 标签超出最大宽度后的处理方式,包括换行和截断省略显示两种,设置为无后则最大宽度不生效 |
描边宽度 | 设置标签背景图的描边宽度,需设置描边颜色后方可生效 |
描边颜色 | 设置标签背景的描边颜色色值 |
描边圆角 | 设置标签背景的描边圆角度数 |
阴影颜色 | 设置标签背景的阴影颜色,需设置标签背景色以及阴影大小后生效 |
阴影大小 | 设置标签背景的阴影大小 |
阴影水平偏移 | 设置标签背景阴影在水平方向的偏移距离 |
阴影垂直偏移 | 设置标签背景阴影在垂直方向的偏移距离 |
线条样式
设置项 | 说明 |
---|---|
图形的颜色 | 设置折线图线条的颜色效果 |
边框颜色 | 设置折线边框的颜色效果 |
描边类型 | 配置折线的描边类型。 选项: 实线 、虚线 、点划线 |
描边宽度 | 设置折线的描边的宽度 |
描边颜色 | 设置折线的描边的颜色 |
描边圆角 | 设置折线的描边的圆角角度 |
阴影颜色 | 设置折线的阴影的颜色色值 |
阴影大小 | 设置折线的阴影的大小 |
阴影水平偏移 | 设置折线的阴影在水平方向的偏移量 |
阴影垂直偏移 | 设置折线的阴影在垂直方向的偏移量 |
透明度 | 设置折线的透明度,透明度取值在0到1之间 |
标签布局
设置项 | 说明 |
---|---|
隐藏重叠的标签 | 开启后会将内容重叠在一起的标签进行隐藏 |
重叠式偏移方向 | 当标签重叠在一起时可选择标签位移的方向,可选择水平或垂直位移两种方式 |
高亮设置
设置项 | 说明 |
---|---|
禁用高亮 | 禁用高亮后,鼠标移至标签位置后不再对标签进行高亮显示 |
高亮时行为 | 设置高亮显示的交互样式 |
淡出的范围 | 设置高亮时交互界面淡出的选择范围,提供淡出坐标系、淡出图表或全局淡出三种方式 |
面积图设置
设置项 | 说明 |
---|---|
启用面积 | 开启或关闭折线图按面积填充的展示方式 |
填充模式 | 可选择面积填充的模式,有坐标轴底部到数据、坐标轴轴线到数据和坐标轴顶部到数据三种填充模式 |
颜色 | 可通过新增单种或多种颜色实现纯色填充或渐变色填充 |
阴影大小 | 设置折线填充图的阴影背景大小 |
阴影水平偏移 | 设置阴影在水平方向上的偏移距离 |
阴影垂直偏移 | 设置阴影在垂直方向上的偏移距离 |
不透明度 | 设置阴影的不透明度,透明度取值在0到1之间 |
阴影颜色 | 设置阴影的颜色色值 |
堆叠
堆叠是指将多个图表数值叠加在一起,形成一个新的图表的展示方式。堆叠常用于柱状图堆叠
和折线图面积堆叠
两种方式中,相比于柱状图堆叠,折线图面积堆叠更适用于在分组数量较多的场景中使用,需要注意的是折线图面积堆叠不适用于带有负值的数据集
。
其中折线图面积堆叠是指将多个数据集绘制为垂直堆叠的区域,堆叠面积图和基本面积图一样,唯一的区别就是图上每一个数据集的起点不同,起点是基于前一个数据集,用于显示每个数值所占大小随时间或类别变化的趋势线,展示的是部分与整体的关系。比如,我们在统计1980年到2022年全国各省份GDP增长情况时,可以通过面积堆叠的方式将各省份的GDP增长曲线堆叠,这样不仅可以看到各省份增长情况,同时堆叠后的整体面积还能直观反馈出全国的GDP增速情况。
设置项 | 说明 |
---|---|
堆叠标识 | 可分别设置每个图表的堆叠标识符,系统会将标识符相同的图表形状堆叠在一起。 |
堆叠策略 | 根据图表数值的正负,可设置堆叠的不同取值策略。 |
事件
设置项 | 说明 |
---|---|
不可点击 | 开启后该图表内所有标签数据无法进行点击,关闭后可设置对应的数据点击交互事件 |
点击后调用自动化 | 可通过选择对应的自动化实现相关数据标签单击交互事件,如点击后打开对应的数据表单详情或者打开其他网页链接等 |
双击后调用自动化 | 功能与点击调用相同,交互由单击触发改为双击触发,可同时设置点击、双击事件 |
极坐标补充
极坐标简单来说就是用角度和长度描述位置的坐标系,与折线图、柱状图在直角坐标系中的展示效果有明显差异,一般可以在柱状图、折线图、散点图三种图表中选择极坐标系进行使用。
极坐标在使用时需先了解以下内容: 极坐标系一般有两个坐标轴,分别称极径
和极角
,分别对应极坐标的径向(即半径)轴线和角度(即圆弧)轴线。同时坐标轴度量类型也有四种类型选择,分别是数值轴
、类目轴
、时间轴
、对数轴
四种,选择不同类型的坐标轴,则图表对应展示的数据刻度不同,四种坐标轴使用场景如下:
设置项 | 说明 |
---|---|
数值轴 | 'value': 数值轴,适用于连续数据,通过半径的长短表示数值的大小。 |
类目轴 | 'category': 类目轴,适用于离散的类目数据,通过固定的半径长度表示各个分类值 |
时间轴 | 'time': 时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,半径反映的是时间点的顺序变化。 |
对数轴 | 'log': 对数轴,适用于对数数据,常用在折线图中做双数值轴呈现。 |
这里我们以折线图为例,做一个简单的2018年XXX公司各月份订单数的极坐标折线图示例,步骤如下: 1、创建仪表卡片,在数据源
菜单中新增数据源,做好2018年数据过滤,通过聚合查询,按月份进行分组对每月订单量进行求和(根据实际情况选择是否需要聚合处理); 2、在图表
菜单中新增折线图图表,数据设置坐标系类型选择极坐标系
; 3、半径字段
选择前面聚合后的订单量,角度字段
选择月份; 4、在极坐标
菜单中可修改轴线、分割线大小颜色等参数,优化图表显示细节。其中需注意,极坐标一般默认径向轴线为数值轴、角度轴线为类目轴,可根据不同业务场景灵活调整轴线类型配置; 5、在悬浮提示
菜单中打开显示悬浮提示按钮; 6、在横轴
、纵轴
菜单中隐藏原始的横纵坐标轴,完成最终的极坐标折线图配置。