在商业智能BI系统中,如何配置高级感的数据可视化折线图?

在数据可视化的世界里,折线图作为一种直观且有效的数据展示方式,被广泛应用于各类数据分析与报告中。折线图不仅能够清晰地展示数据随时间或其他连续变量的变化趋势,还能通过不同的样式配置,增强图表的可读性和美观度。在JVS-智能BI中,提供了折线图图表类型,接下来我详细介绍折线图样式的配置。

折线图表概述

折线图图表组件可分为基础折线图、基础面积图、对比折线图和其他折线图。除了其他组件都有的通用样式之外(可以参考【图表通用样式配置】文档),这四个图表的独有样式都是相同配置。我们以最常见的基础折线图来进行演示,展示折线图图表的独有样式配置。

样式配置

点击选择基础折线图,选择后点击【样式】下的【自定义样式】。就可以看到大致分为【图表设置】、【标题设置】、【X轴】、【Y轴】、【目标线】、【图例设置】、【组件外观】这几个大的模块。其中【标题设置】、【组件外观】、【图例设置】已在【图表通用样式配置】文档中提到具体配置。此处将剩下的折线图图表独有的样式设置。

图表设置

点开【配色方案】,可选择该折线图组件的主题颜色以及是否开启渐变。

图形配置,主要是对折线图内部的相关配置。主要有折线线条风格、线条样式、线条宽度、标记点及其样式、阴影以及显示面积的样式设置。以下为具体配置方式。

折线线条风格、线条样式、线条宽度样式的话即是对线条方面不同样子的一个呈现方式,可根据实际选择自己想要的样式。其中线条风格可分为折线和曲线,线条样式有实线虚线等。以下为配置详情。

【标记点】即为折线图上的每个拐点,可设置标记点形状,默认形状为实心圆。可按自己喜好进行调整标记点的形状和大小。

【阴影】即是该折线的阴影设置,可调节阴影的x、y轴的偏移量来实现阴影和原折线不重叠。模糊度越大即阴影显示越不明显。

【显示面积】就是给折线图的下半部分进行填充处理,可定义填充背景颜色以及不透明度。

【显示数据】一般用于你数据集选择后,字段和维度的展示。打开显示数据后,可定义数据显示的文字大小颜色、粗细、斜体、上下边距。

显示位置可定义显示数据是位于折线每个拐点的什么位置,可分为顶部、中心、左侧、右侧、底部五种。现在分别展示五种方式最后的效果。

启用迷你图,即是缩去x和y轴的数据,只看得到曲线。直接看下图展示即可。

数据缩放即下方会出现一个缩放条,可根据此条自由缩放展示的数据。

开启提示信息的话,开启后当鼠标经过到折线图上的某一块儿时,那么就会显示出该块儿的信息提示。

x轴和y轴设置是一样的,区别就是一个为横轴一个为纵轴。这里就描述一下x轴的样式相关配置,y轴进行类比即可。

我们点开x轴,可以看到轴标签可设置轴标签的文字大小、颜色、粗细、斜体等。还可定义其标签的倾斜角度。

显示轴线即轴标签和柱状图之间的分界线,为让轴线显示更加明显看得更加清晰。这边使用显眼颜色并加宽字体大小以供展示效果。

显示网格线即是x轴的网格线,勾选后可定义网格线的线条、粗细以及颜色。这里用显眼的黑色加以区分,以看到实际效果。

【目标线】即添加一条目标线,用于用户更方便查看那些数据达成目标。点开目标线,选择添加目标线。

添加目标线,需给出目标线名称、定义目标线种类(可分为自定义、平均值、最大值、最小值)、目标线样式、颜色、大小。以及目标线显示内容是数值还是名称还是名称+数值,同时亦可设置文本标签的大小、样式和颜色。以及文本标签所处的位置是在线的开始顶部、底部、还是居中或末尾顶部或底部。

在线demo:http://bi.bctools.cn

gitee地址:https://gitee.com/software-minister/jvs-bi

相关推荐
面向Google编程3 分钟前
从零学习Kafka:ZooKeeper vs KRaft
大数据·kafka
热爱专研AI的学妹36 分钟前
Seedance 2.0(即梦 2.0)深度解析:AI 视频正式迈入导演级精准可控时代
大数据·人工智能·阿里云·音视频
LiAo_1996_Y42 分钟前
CSS如何实现文字渐变效果_通过background-clip实现艺术字
jvm·数据库·python
2401_8877245044 分钟前
CSS如何让表单在手机端友好展示_利用Flexbox实现堆叠排版
jvm·数据库·python
zhangchaoxies1 小时前
Layui轮播图(carousel)怎么设置自动播放间隔
jvm·数据库·python
FreakStudio1 小时前
无硬件学LVGL:基于Web模拟器+MiroPython速通GUI开发—布局与空间管理篇
python·单片机·嵌入式·面向对象·并行计算·电子diy
qq_372906932 小时前
如何在 Vuetify 中可靠捕获 Chip 关闭事件(包括键盘触发)
jvm·数据库·python
Ulyanov2 小时前
用Pyglet打造AI数字猎人:从零开始的Python游戏开发与强化学习实践
开发语言·人工智能·python
lcj09246662 小时前
磁控U位管理系统与DCIM对接实现:筑牢数据中心精细化运维底座
大数据·数据库·人工智能
zopple2 小时前
ThinkPHP5常见问题及解决方案
python·php·laravel