D3.js、echar.js 前端必备大数据技能

本文涉及的产品
云原生大数据计算服务MaxCompute,500CU*H 100GB 3个月
云原生大数据计算服务 MaxCompute,5000CU*H 100GB 3个月
简介:

1f8a0d22d3773b62ad6b5df361b87657adb31314

大数据可视化

「 前言 

web前端一直都是个讲究门面和艺术美感的行业,如果你以为逻辑很强就够了,那就错了,你只适合做后端,真正的好前端是对美感和可视化的东西有一种接近痴狂的爱好,这种契机可以驱使你做出更好的产品和提升。

现在又是大前端时代,前端不但要求基本的传统前端技能,也要会后端语言开发,前后配合思想,更是在大数据潮流下,显得至关重要,因为人人都讲究大数据,可你只有枯燥的海量的数据,展示不出来,没有可视化、可操作的入口,那这些数据也只是一堆二进制而已。

啰嗦这么多,问题来了,我们傲娇的web前端究竟如何在大数据里分一杯羹、出一份力、如何在大数据公司,靠技能谋得重要职位呢?

大数据这个行业很细分,也很庞大,数据可视化是其中一门,也是最为基础和不可或缺的一环,因为内心再好,如果你长得像凤姐,也没人愿意看你一眼,所以,我们的时代又一次来临了。

如果在以前,要实现各种图表,我们只能选择flash。,因为那时候没有svg、canvas的概念,但是flash成本较高,图表多的时候很耗性能。后来越来越多的js框架出现,得益于HTML5的api的推广和完善,把可视化发挥的淋漓尽致,其中不乏佼佼者老外的D3.js、highcharts、百度的echarts等

那今天北妈就来捋一捋这几个用的最频繁的可视化js库的特点和选择问题。

「 框架简单对比 

1.highcharts
这是一个北妈认为很好用,也很亲民的一个项目框架。
这个框架的中国社区的童鞋,比较积极地维护和不断更新着好多实例,往往能在丰富的例子找到类似的表达样图。但翻译难免有疏漏,而且中文版官网,打开速度着急,更新频率也不行了。推荐:3半星
所以自行斟酌,找几个图给大家看看

e52ae2f1842add48ebdc9de461844fa6390ec041


21defbaf473837ddecb0580123a07d39b49a357c


实现代码方式:简单、原始、粗暴- 还是 jq的方式


964226ed4e1f146bce4aaa61f5c22a9bd6024963



2. D3.js
这D3.js除了用强大、牛鼻来形容,就不知道怎么去来表达它的厉害之处了。里面的组件和实现效果真的眼花缭乱,只有你想不到,没有它办不到,这个也被视为js 可视化框架的鼻祖楷模,但文档难懂,属性繁多,入门略有瑕疵 推荐:4个半星

c181abef3ba9e0baa0b08085180e103f2f78f212

6d649fee6397bb592c90e61181fd07c722764e1f

ce6a9755343c291e930ef1cd9d7ef935b45842cc


D3.js 入门略麻烦,但效果繁多,组建灵活,而且还有专门的书来讲解怎么做,可以说发展到现在已经是全世界公认的第一可视化框架,甚至发展了很多其他学科出来,专门研究优化 D3这个神器,想了解的自己去官网



3. Echarts.JS
echarts 我相信大家已经算熟悉了,百度为数不多的良心库,也算是为咱们做了一件好事,echarts 我用的也算多,入手简单,文档清晰,效果绚丽,主要是国产,文档也很容易看,由百度前端团队专人维护,不必担心突然夭折,所以推荐: 5个星。

38f23277b8c96d61fcf2813253680013b75ddfb9


12c043c308c01f1cee6e4c5765d5bcd52fb241e9

6b4a208ae9235c6014f623c769dadf3a1e1db938

0b6f7f084a53ce458b25e901707458607bd5ed57

5b772cc601ca71a61f7dc5a338cab17e3d6a3e1e

代码实现是数组 map形式,有助于json方式传送,更适合前后分离的方式和后端对接数据,所以我第一推荐echarts,如果只是一般的数据效果,都可满足。

「 中肯建议 

Highcharts和echarts是一类东西,以现成、管吃饱著称,拿来就用,但跟d3.js维度不同。

假如前面两个能解决你普通需求,比如图表、比例图、地图维度什么的,那么就可以先不考虑d3。
英语好选highcharts,英语不好选echarts。想省事儿 用 echarts,想自己实现牛鼻的效果首选d3.js

d3.js 更自由强大些,如果某天一个傻x客户要求你做一个 定制牛鼻的chart,你一看我擦百度 echarts没有现成的,想让我死?

那你就只能找d3.js自己拼接撸一个,美观度和工作量都要自己把握。
而性能方面,简单图表都没什么差距,但数据量大、复杂运算、动画效果多的话,都快不了,所以3个框架,性能上没什么高低贵贱,主要是看你喜好


原文发布时间:2018年01月30日

作者:前端你别闹

本文来源:CSDN  如需转载请联系原作者

相关实践学习
基于MaxCompute的热门话题分析
本实验围绕社交用户发布的文章做了详尽的分析,通过分析能得到用户群体年龄分布,性别分布,地理位置分布,以及热门话题的热度。
SaaS 模式云数据仓库必修课
本课程由阿里云开发者社区和阿里云大数据团队共同出品,是SaaS模式云原生数据仓库领导者MaxCompute核心课程。本课程由阿里云资深产品和技术专家们从概念到方法,从场景到实践,体系化的将阿里巴巴飞天大数据平台10多年的经过验证的方法与实践深入浅出的讲给开发者们。帮助大数据开发者快速了解并掌握SaaS模式的云原生的数据仓库,助力开发者学习了解先进的技术栈,并能在实际业务中敏捷的进行大数据分析,赋能企业业务。 通过本课程可以了解SaaS模式云原生数据仓库领导者MaxCompute核心功能及典型适用场景,可应用MaxCompute实现数仓搭建,快速进行大数据分析。适合大数据工程师、大数据分析师 大量数据需要处理、存储和管理,需要搭建数据仓库?学它! 没有足够人员和经验来运维大数据平台,不想自建IDC买机器,需要免运维的大数据平台?会SQL就等于会大数据?学它! 想知道大数据用得对不对,想用更少的钱得到持续演进的数仓能力?获得极致弹性的计算资源和更好的性能,以及持续保护数据安全的生产环境?学它! 想要获得灵活的分析能力,快速洞察数据规律特征?想要兼得数据湖的灵活性与数据仓库的成长性?学它! 出品人:阿里云大数据产品及研发团队专家 产品 MaxCompute 官网 https://www.aliyun.com/product/odps 
目录
相关文章
|
14天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
108 2
|
13天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
30 0
|
15天前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
61 41
|
14天前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
33 1
JavaScript控制台:提升Web开发技能的秘密武器
|
9天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
16 3
|
2天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
7 0
|
13天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
83 0
|
13天前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
13天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
13天前
|
Web App开发 JavaScript 前端开发
对于 前端 解释下 node.js的必要性
对于 前端 解释下 node.js的必要性
12 0