图表库 - Highchart / Echart
当前主要使用HighChart和Echart图表库,都基于Jquery,需要先引用Jquery。
实际问题:引入Jquery需在图表库前,否则报错。
HighChart官网:https://www.hcharts.cn/demo/highcharts
Echart官网:http://echarts.baidu.com/
1、特点分析
HighChart:
兼容性 - 支持所有主流浏览器和移动平台(android、iOS等)。
多设备 - 支持多种设备,如手持设备 iPhone/iPad、平板等。
免费使用 - 开源免费。
轻量 - highcharts.js 内核库大小只有 35KB 左右。
配置简单 - 使用 json 格式配置
动态 - 可以在图表生成后修改。
多维 - 支持多维图表
配置提示工具 - 鼠标移动到图表的某一点上有提示信息。
时间轴 - 可以精确到毫秒。
导出 - 表格可导出为 PDF/ PNG/ JPG / SVG 格式
输出 - 网页输出图表。
可变焦 - 选中图表部分放大,近距离观察图表;
外部数据 - 从服务器载入动态数据。
文字旋转 - 支持在任意方向的标签旋转。
Echart:
一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),
底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。
对比:
A.HighChart配置显示更加灵活,支持html属性,Echart可定制性差,不支持HTML
实际问题:HighChart可利用html属性实现太长省略号问题,Echart可用formatter方法判断标签长于N个字符,截断并加上省略号.
B.Echart 动态效果优于HighChart,HighChart兼容性由于Echart
C.Highchart基于svg,可进行后续对dom进行操作,Echart基于canvas,实现大数据展示效果好
D.echarts.js支持按需求打包:echarts.js官网提供了在线构建的工具,可以在线构建项目时,选择项目所需要使用到的模块,从而达到减小JS文件的体积
2、使用方法:
HighChart:
跟ECharts一样,HighCharts也需要下载相应的插件,不过HightCharts的插件很简单,只有一个highcharts.js文件
如果需要导出图表,则需要exporting.js文件
如果需要一些特殊的图形呈现,则还需要下载highcharts-more.js
Echart:http://www.cnblogs.com/ninilovebobo/articles/3932805.html
实际问题:echarts.js的体积较大,建议使用echart.min.js,但部分效果不兼容
3、常见图表元素(以Echart为例,Highchart属性类似)
3.1、标题(title)
常见属性:主标题文本(text),文本样式(textStyle)
3.2、提示语(tooltip)
常见属性:格式化文本(formatter),文本样式(textStyle)
3.3、横坐标(xAxis)、纵坐标(yAxis)
常见属性:坐标轴的分割数(splitNumber),最大(max),最小(min),坐标轴线的相关设置(axisLine),坐标间隔(interval),旋转角度(rotate)
实际问题:
1、图表库的横纵坐标数据为自动计算,若自动计算结果显得太拥挤,可用splitNumber属性定义建议分割数,
但这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
2、横坐标数据太多,显示错位或换行,有两种方案处理:将刻度标签旋转较度;或增大坐标轴刻度标签的显示间隔
3、若非必要,不要随意设置max,否则容易造成图表超出y轴刻度线的问题,可利用min属性去掉负坐标;
3.4、图例(legend)
常见属性:是否显示(show),朝向(orient),边框颜色(borderColor),边框宽度(borderWidth),格式化文本(formatter)
实际问题:图例默认边框自带圆弧,若要去除,borderRadius无效,borderRadius指的是这个图例的外边框
设置单个图例的边框属性:
legend: {
data: [{
icon:‘rect’,
}]
}
3.5、数据(series:)
可对单一条数据进行设置。
实际问题:可用来设置当数据为空时,不显示0
label: {
normal: {
show: true,
formatter: function (value) {
if (value.value == 0) {
return "";
} else {
return value.value;
}
}
}
}
3.6、直角坐标轴(grid)
常见属性:上(top)下(bottom)左(left)右(right)间距,高度(height),宽度(width)
实际问题:一般图表宽度在外层div中设置,较少使用grid中的height,width;
若使用js计算图表高度、宽度,需在绘制图表前,确定div的大小
3.7色系(color)
color:['#fbb748', '#52e452', '#4493d5', '#abd74a', '#73c1e6', '#ff86ff', '#8686ff', '#e06c50', '#f2e73d', '#c3cf49', '#afc3f1']
按顺序取色值,若所设置的颜色数量不够,则循环使用
4、模拟鼠标划过事件(Highchart)
onMouseOver() // 模拟鼠标划过事件,配合 setInterval 可以实现轮选点
图表库 - Highchart / Echart的更多相关文章
- js组件在线编辑器插件、图表库插件、文件树插件
在线编辑器插件: 一.kindeditor 二.UEditor 图表库插件: 一.echart 二.highchart 文件树插件: 一.zTree -- jQuery 树插件 http://www. ...
- 基于canvas实现的高性能、跨平台的股票图表库--clchart
什么是 ClChart? ClChart是一个基于canvas创建的简单.高性能和跨平台的股票数据可视化开源项目.支持PC.webApp以及React Native和Weex等平台.在React Na ...
- iOS图表库Charts集成与使用
Charts是一个很优秀的图表库,它支持Android.iOS.tvOS和macOS,这样使用起来,可以节省学习成本,可以从GitHub上了解更多信息.本文记录在iOS项目上的集成与使用. Chart ...
- ECharts(Enterprise Charts 商业产品图表库)初识
一.简介 大数据时代,重新定义图表的时候到了,所以随之ECharts就随之出现了. ECharts(Enterprise Charts 商业产品图表库) 是基于Canvas的,纯Javascript ...
- ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表
ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...
- 功能齐全的图表库 ACharts
ACharts是基于Raphael 库开发的,而Raphael.js是基于svg和vml语言,因此最低可以兼容到IE6+,而最高则所有支持w3c svg标准的现代浏览器都可以使用,svg甚至在手机平台 ...
- 11个很棒的 jQuery 图表库
如果你曾经使用过任何类型的数据,你应该知道阅读一排排数据的痛苦.通过所有这些数据弄清楚他们的意思是非常不容易的.可视化对于解决这个问题起到了重要的作用.可视化降低了数据阅读的难度,帮助决策者获得可操作 ...
- 最牛逼android上的图表库MpChart(三) 条形图
最牛逼android上的图表库MpChart三 条形图 BarChart条形图介绍 BarChart条形图实例 BarChart效果 最牛逼android上的图表库MpChart(三) 条形图 最近工 ...
- 最牛逼android上的图表库MpChart(二) 折线图
最牛逼android上的图表库MpChart二 折线图 MpChart折线图介绍 MpChart折线图实例 MpChart效果 最牛逼android上的图表库MpChart(二) 折线图 最近工作中, ...
随机推荐
- 当svn检出项目检出一半时停止,如何继续检出
1.当svn检出项目时,发现中断,又不想重新检出可以在已检出的项目目录下右键 2.然后点击 之后直接update你的项目就可以了
- 09.正则表达式re-1.正则表达式
1.正则表达式概述 正则表达式(英语:Regular Expression,在代码中常简写为regex.regexp或RE),是计算机科学的一个概念. 正则表达式使用单个字符串来描述.匹配一系列匹配某 ...
- 2.Git可视化操作
1.在本地新建版本库 首先,我们打开Git GUI是这样的一个界面,选择第一项,新建版本库. 然后选择你需要进行版本管理的项目路径,我选择了一个LoginDemo的项目. 当你创建了版本库的时候,你可 ...
- java反射,简单demo
直接上码 //获取方法.属性.构造函数时加 Declared 表示获取本类全部的,不分修饰符:不加 Declared 表示获取从父类继承的和本类公共的 //获取 First 类的无参构造函数 Cons ...
- QT5的模块介绍【摘】
Qt 5 模块分为 Essentials Modules 和 Add-on Modules 两部分.前者是基础模块,在所有平台上都可用:后者是扩展模块,建立在基础模块的基础之上,在能够运行 Qt 的平 ...
- ASP的Global.asa使用说明
/*-------------------ASP文档参考集-----------------------*/ *-->作者:草履虫 *-->时间:2007-4.28---2007-4.30 ...
- Ngnix--知识点
ngnix擅长负载 均衡的反向代理 haproxy擅长高可用的反向代理,这个还支持TCP协议 ngnix只能支持HTTP和Email(这个HTTPS需要核实一下) ngnix和haproxy都需要ke ...
- [bzoj1070][SCOI2007]修车_费用流
修车 bzoj-1070 SCOI-2007 题目大意:有m个人要修n台车,每个工人修不同的车的时间不同,问将所有的车都修完,最少需要花费的时间. 注释:$2\le m\le 9$,$1\le n \ ...
- djanjo ORM 一对多、多对多
一.表操作之一对多 定义表结构:定义了UserType.两张表UserInfo,如下: from django.db import models class UserType(models.Model ...
- Spring Boot错误:Unable to start embedded container...的问题解决
解决方法: 1.用错了注解,改用以下注解: @SpringBootApplication 相当于:@Configuration.@ServletComponentScan.@EnableAutoCon ...