| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> 数据可视化之折线图让数据变得更直观易懂 -> 正文阅读 |
|
[JavaScript知识库]数据可视化之折线图让数据变得更直观易懂 |
折线图用于显示随时间或有序类别而变化的趋势,可能显示数据点以表示单个数据值,也可能不显示这些数据点。 折线图是排列在工作表的列或行中的数据可以绘制到折线图中。折线图可以显示随时间(根据常用比例设置)而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势。折线图也同样也是可视化数据大屏中最常见常用的图表类型。 下面是数据大屏——”粮食那些事儿”,其中就充分运用了折线图,让数据变得更加直观,更加明了,更见通俗易懂。 ?今天用数据可视化平台来讲解,主要围绕折线图展开。同柱状图、饼图及其他图表一样,折线图同样很大众化,每个人都见过,这本身也成了它的一个优势,就是非常易于理解。并且折线图更适合二维的大数据集,尤其是那些趋势比单个数据点更重要的场合以及适合多个二维数据集的比较。 ? 首先拖拽一个基本折线图组件到画布中,图中折线图呈现的是每月的支出和收入,深蓝色为收入,浅蓝色为支出。 点击标题、图例、工具栏、提示按钮即可显示折线图的标题图例工具栏和提示等等;点击打开图例选择模式,点击途中方框中的支出或者收入,就可以只看选择图例,目前选中的是收入图例 这是简单美化后的效果,通过这些设置,看起来颜值稍微高了一点吧。大家可依据自己的喜好随心所欲自由设置。 ?可以切换成平滑折线图,和基本折线图相比,将折线图变成了光滑曲线,功能及属性配置全部一样。 可以切换成面积折线图,面积图与折线图不同的是,面积图中带有颜色的面积也可以进行量的表达。 ?可以切换成堆叠折线图,同基本和平滑折线图相比,Ta的数据是成堆叠式的展示。 ?可以切换成堆叠面积图,注意需要同时开启平滑显示、面积图和数据堆叠显示。 ?趋势预测图,Ta在基本折线图的基础上,对数据进行了一个预测值,以及预测上限以及下限的值。 ?正反折线图,如下图所示,就是将“收入”,“支出”区分开来,一正一反形成鲜明的比较。 ?阶梯折线图,顾名思义则将基本折线图呈阶梯状显示,像一层层楼梯一样 ?当然,以上几种折线图如果中意其中一种,也可以直接点击组件即可调用。它们的数据结构类似,接下来给大家讲一下如何进行数据替换。大家可以依据数据源格式,在原有格式下进行修改替换。 ?当然,如果觉得数据源修改起来不太方便或者数据量太大,也可以下载模板文件,在原有文件上修改上传即可调用。 ?下图是根据模板上传的数据表,可清晰的看到各部门总数及男女人数。 无论是图形的多样化、属性的设置还是数据配置,都很简单,完全零基础即可实现。而且在时间序列数据比较多的情况下,折线图看起来同样非常细腻美观。 大家可以动手尝试一下,一方面可以熟悉可视化互动平台中各个要素的设置,另外也可能发现一些意想不到的惊喜,赶快搜索解锁更多功能。 |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/24 1:15:24- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |