1.charts.js

技术:基于HTML5 canvas

类型:6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)

量级:独立包,不依赖第三方 JavaScript 库,小于 5KB

大小:Chart.min.js-50.201 kb

特性:颜色,字体,边框和它们的尺寸都可以定制,图表可以动画的形式加载,非常炫

兼容:支持canvas的所有现代浏览器和大部分手机浏览器,自动针对retina屏幕做缩放

其他:图表如果使用动画效果,在PC端流畅,但是在移动端效果产生抖动延迟现象;如果不使用动画效果在移动端则正常显示

推荐指数:★★★★☆

分析:移动端表现佳,课通过自适应宽度来使得图表宽度与设备屏幕适配。适当缩小图表,合理展示数据。兼容能力强,API使用不复杂。

2.echart.js

用途:商业级数据图表,百度组件

技术:底层基于ZRender(一个全新的轻量级canvas类库)

类型:支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图等11类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。

量级:轻量级,纯Javascript的图表库

特性:提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

兼容:可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等)

大小:echarts-plain.js – 449KB

推荐指数:★★☆☆☆

其他:文档说支持移动端但是目前在UC及QQ浏览器上都显示空白,微信上能显示图形,但是界面处理的不好,缩小太严重导致数据分不清。基础库文件太大。

分析:引入组件过大(449K)。需指定图表高度,使得图表不能只适应屏幕,手机端需要滚屏查看。能把图表生成图片。

3.ichart.js

技术:基于HTML5的图形库,使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形

特性:为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案

类型:饼图、环形图、折线图、面积图、柱形图、条形图

量级:轻量级,不依赖任何其他库,只和浏览器相关,一个完全独立的轻量级js组件

大小:ichart.1.2.min.js – 94.5 KB

兼容:跨平台,在现代的主流浏览器中运用自如

其他:基于Apache License 2.0协议的开源项目

推荐指数:★★★☆☆

分析:程序通过代码指定图表的高宽,所以可通过判断设备的宽度来实现自适应,但是如果设备宽度过小,还是会导致数据重叠显示情况。使用不灵活。

例子:柱形图,PC端与手机端显示一致,手机端并不会缩放,需要页面滚动

4.Canvasjs

技术:HTML 5 & JavaScript 图表库,基于 Canvas 元素

兼容:Graphs 可以通过设备渲染,包括 iPhone,iPad,Android,Windows Phone,Microsoft Surface,Desktops 等等。它允许用户创建适用于所有设备,不影响 web 应用程序的功能和可维护性的富仪表盘。

类型:基本数据图表格式

量级:轻量级

大小:canvasjs.min.js – 176KB

推荐指数:★☆☆☆☆

特性:有着非常漂亮的主题和超过传统的 Flash 和 SVG 图表 10x 倍以上的速度——生成轻量级,漂亮和响应式的仪表图

其他:收费

5.Highcharts

技术:基于svg技术

类型:直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表

兼容:支持目前所有的现代浏览器,包括IE6 +、iPhone/iPad、Android。在标准(W3C标准)浏览器中使用SVG技术渲染图形,在遗留的IE浏览器中使用VML技术来绘图

大小:highcharts.js – 149KB

数据:支持多种数据形式,可以是Javascript数组、json文件、json对象和表格数据等,这些数据来源可以是本地、不同页面,甚至是不同网站

特性:可以设置图表的缩放,让你更方便查看图表数据。功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库

分析:依赖于jQuery,通过样式控制自适应(min-width、max-width),在手机端表现良好。组件大小(150KB),

其他:支持移动端,根据页面宽度定义图表宽度。需要商业授权

推荐指数:★★★★☆

分析:移动端表现佳,能根据分辨率做相应的处理使得数据美观展示

6.Canvas

用canvas画自己中意的图表,适用于ui效果与插件类图表差异大的情况

工具

分析

从移动端的图表数据显示需求来看,由于移动端屏幕偏小,不能展示太多的数据,所以抛弃一些复杂数据显示形式。一般用到的格式为表格、曲线图、柱形图、饼图等。从以上几个组件分析来看,较适合的组件为chartjs和highcharts。而前者chartjs更为轻量,后者highcharts略繁重,主要看业务需求做取舍。

移动端html页面显示图表,HTML5移动端数据图表组件调研相关推荐

  1. 移动端导航页面html,swiper4实现移动端导航切换

    本文实例为大家分享了swiper4实现移动端导航切换的具体代码,供大家参考,具体内容如下 首先导入 (这里用的是Swiper 4.0.7版本) 在写入html内容 商品分类 手机 厨具 数码 家纺 生 ...

  2. python 制作数据图表_python制作各种数据图表

    工具集合 数据由python处理,所以首先需要安装python,官网下载即可.可以不用安装python的编辑器,自己用Notepad写就可以. 安装图表处理库pyecharts,命令是:pip ins ...

  3. 【实战篇】37 # 如何使用 QCharts 图表库绘制常用数据图表?

    说明 [跟月影学可视化]学习笔记. QCharts 图表库 QCharts 是一个基于 spritejs 封装的图表库,可以让用户以组件的形式组合出各种图表:https://www.qcharts.c ...

  4. html5圆圈图标,html5移动端环形图标菜单代码

    特效描述:html5移动端 环形图标菜单.html5移动端环形图标菜单代码 代码结构 1. 引入JS 2. HTML代码  html5移动端环形图标菜单代码 window.οnlοad=functi ...

  5. m3u8 video ios h5_移动端H5页面踩坑记

    移动端H5页面踩坑记 移动端的样式问题 「1. 安卓 font-weight:700;以上才被认为是加粗.」 「2. border 在 1px 以内是不被安卓识别的一些 0.5px 的下划线怎么搞?」 ...

  6. word打开html显示空白,word的页面显示不正常显示不出来怎么办 word怎么恢复正常页面...

    Word文档图标显示不正常怎么办 Word程序的图标可以正常显示,但是Word文档不显示图标,只是空白一片. 此类问题是由于Word程序相关组件损坏导致,可以通过下面的方案来解决:1. 按键盘上的Wi ...

  7. 手机端剪切图片插件 php,html5移动端上传图片裁剪插件

    特效描述:html5移动端 上传图片 裁剪插件.html5移动端图片裁剪.支持缩放. 代码结构 1. 引入JS 2. HTML代码 选择图片 使用 window.addEventListener(&q ...

  8. Excel中可视化数据图表制作要点有哪些?

    Excel中可视化数据图表制作要点有哪些? [导语]如果你想要成为一名合格的或者是优秀的数据分析师,不仅要能够准备完整分析数据,还要将数据分析结果可视化,图表制作是数据可视化必不可少的形式,那么Exc ...

  9. 移动端 html5领奖页面,HTML5移动端交互

    在移动设备中,几乎所有的操作都和触摸有关,而基于这一特性,近年来在移动端中也兴起了一些较为特别的交互方式.用手指在屏幕上"刮奖"就是其中的一个非常典型的例子,它不仅需要前端设计师能 ...

  10. html5 移动端单页面布局

    序      移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都 ...

最新文章

  1. Android爬坑之旅:软键盘挡住输入框问题的终极解决方式
  2. 笔记本高分屏字体模糊_高色域+高分辨率轻薄本推荐,你需要2K屏笔记本电脑么?...
  3. opencv方框内图像保存_opencv利用矩形框选中某一区域并保存为新图片
  4. mysql 线性表_数据结构-线性表之顺序表
  5. 那些年,我们见过的 Java 服务端“问题”
  6. oracle 之 内存—鞭辟近里(一)
  7. android适配规则(一)
  8. 生产制造MES系统源码 采购管理模块解析
  9. Impala 解决Invalid argument: Client connection negotiation failed异常
  10. Django框架学习——4—(DTL模板标签、模版常用过滤器、模版结构优化、加载静态文件)
  11. latex 波浪线 ~
  12. 微信和支付宝相关支付业务场景介绍
  13. 做数据分析需要学什么?这几项技能你掌握了吗?
  14. 白话中台战略2:中台到底长啥样?
  15. 五格数理用字(笔画+五行)
  16. oracle笔记:新手上路必备。花了两天时间整理出来的,详细的不能再详细了。
  17. Tomcat 启动时报 java.net.BindException: Address already in use[localhost:8005]
  18. 韦氏进销存软件功能更新20220223
  19. 卓尼斯ZT-180评測
  20. semantic ui html5,css中什么是Semantic UI框架?

热门文章

  1. mybatis学习第一次使用
  2. 基于docker快速搭建自己的域名邮箱,mailu邮件服务器
  3. 光影精灵安装ubuntu20.04安装显卡驱动外界显示屏
  4. 泛微协同办公平台E-cology8.0版本后台维护手册--组织权限中心
  5. 树莓派做BT下载器:transmission
  6. 三维可视化JavaScript组件接口
  7. 小型局域网环境下搭建的文件中转系统
  8. mysql oracle视频网盘_动力节点MySQL数据库视频 百度云 网盘 下载
  9. 【转载】matlab中norm函数的用法
  10. Microsoft Teams 当前页面脚本发生错误/例外被抛出且未被接住