在平时开发项目时,免不了需要对数据进行图表显示的需求,比如:趋势图、饼状图、柱形图等。
Echarts.js是来自百度团队研发的图表js插件,利用HTML+js实现折线图、饼状图、热点图、3d图形等等,可在PC和移动端显示,加载速度快,功能丰富。
https://echarts.apache.org/zh/index.html
官网首页有着很多实例以及相关介绍,获取echart.js可以从本人百度网盘获取,包含所有图表组件,可直接引用。
链接: https://pan.baidu.com/s/1IEm8NGwqq4ExgYWp8mz9CA
提取码:aihy
为Echarts放置一个具备宽高的DOM容器
Echarts加载数据
D3.js
D3 是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到 DOM,然后将数据驱动转换应用到文档中。你可以使用它用一个数组创建基本的
HMTL 表格,或是利用它的流体过度和交互,用相似的数据创建惊人的 SVG 条形图。
ChartJS
Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas
基础上。目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于
5KB。
Highcharts JS
Highcharts JS 是一个制作图表的纯 Javascript 类库,主要特性如下:兼容性:兼容当今所有的浏览器,包括 iPhone、IE
和火狐等等对个人用户完全免 费纯JS,无BS支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图跨语言:不管是
PHP、Asp.net 还是 Java 都可以使用。
Fusioncharts
FusionCharts Suite XT 是个专业的 JavaScript
图表库,能创建任何类型的图表。它创建的图表都是可以进行完全自定义的,标签,字体,边界等等,都可以进行修改。它有很强的交互功能,有许多信息提示,可 点击的
legend 关键字,还有 dril-down,缩放/滚动 和单击打印图表功能。
Flot
Flot 是受 Plotr 和 PlotKit 的 启发,Ole Laursen 基于 jQuery 开发了一个图表绘制(WEB Chart)插件并命名为
flot。 flot 是个纯 JavaSript 库,专注于简单的使用方式,迷人的外观和交互式特性。支持的浏览器有: Internet Explorer 6+,
Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。
Chartist.js
Chartist.js 提供了优美的响应图表。就像 ChartJS。它使用 SVG 渲染图,可以被控制,并通过对 CSS3 媒体查询和 SASS
定制。另外 Chartist.js 提供很酷的动画。
n3-charts
如果你是一个 AngularJS 开发者,你一定喜欢款有趣的图表。它是建立在 D3.js 和 AngularJS 的基础上,提供了可定制的
AngularJS 指令的形式不同标准的图表。
Ember Charts
Ember Charts 是一个基于 Ember.js 和 D3.js
的图表库。它包括时间序列、柱状图、饼图、点图,很容易扩展和修改。这些图表组件代表图表交互性和演示的最佳实践,是高度可定制和可扩展的。
Chartkick
Chartkick 是专为 Ruby 应用程序的 JavaScript
图表库。它提供了所有主要的图表类型,如饼图,柱形图,条形图,面积,地理,时间,以及多个系列。
MeteorCharts
它有一个很酷的图表生成器,为您提供选项来选择图表,选择主题,然后生成一个图表。
amCharts
amCharts 无疑是最漂亮的图表库。amCharts 提供了JavaScript/HTML5 Charts、Javascript/HTML5
Stock Chart、JavaScript Maps 三种图表组件。
EJS Chart
EJS图表声称自己是企业准备的图表库。图表看起来很干净,可读性比大多数旧的图表库。这也是与IE6+等旧浏览器兼容。
uvCharts
uvCharts 是一个开源的 JavaScript 图表库,号称有100多个自定义选项。它拥有12种不同的标准图表类型,开箱即用。
ECharts
基于 Canvas,纯 JavaScript
图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、和弦图以及力导向布局图,同时支持任意维度的堆积和多图表混合展现。
1、使用Ext.container.Container--创建容器2、使用Ext.panel.Panel--创建面板
3、使用Ext.toolbar.ToolBar--创建工具条
4、使用Ext.tab.Panel--创建Tab面板
5、使用Ext.container.Viewport--整体布局
6、使用Ext.window.Window--创建窗口
7、使用Ext.window.MessageBox--创建对话框
8、使用Ext.menu.CheckItem、Ext.menu.ColorPicker、Ext.menu.DatePicker实现特殊菜单项
9、使用Ext.Ation--创建按钮
10、使用Ext.ProgressBar--创建进度条
11、使用Ext.slider.Single--创建滑动条
12、使用Ext.Img--创建图片
13、使用Ext.Editor--创建编辑器
14、使用Ext.tip.ToolTip--创建提示
15、使用Ext.QuickTipManager和Ext.tip.QuickTip--创建提示
16、使用Ext.ux.GMapPanel实现Google地图
17、使用Ext.form.field.ComboBox--创建复合框
18、使用Ext.data.Store与Ext.data.Model管理数据
19、使用Ext.data.Proxy.Proxy和Ext.data.reader.Reader读取数据
20、使用Ext.grid.Panel--生成表格
21、使用Ext.grid.column.Column-定义列
22、使用Ext.grid.Panel显示远程数据
23、使用Ext.tree.Panel生成数
xtype Class 描述
button Ext.Button 按钮
splitbutton Ext.SplitButton 带下拉菜单的按钮
cycle Ext.CycleButton 带下拉选项菜单的按钮
buttongroup Ext.ButtonGroup 编组按钮(Since 3.0)
slider Ext.Slider 滑动条
progressExt.ProgressBar 进度条
statusbar Ext.StatusBar 状态条,2.2加进来,3.0 又去了
colorpaletteExt.ColorPalette调色板
datepicker Ext.DatePicker 日期选择面板
xtype Class 描述
window Ext.Window 窗口
viewportExt.ViewPort视口,即浏览器的视口,能随之伸缩
box Ext.BoxComponent盒子组件,相当于一个 <div>
component Ext.Component 组件
container Ext.Container 容器
panel Ext.Panel 面板
tabpanelExt.TabPanel选项面板
treepanel Ext.tree.TreePanel 树型面板
flash Ext.FlashComponent 显示 Flash 的组件(Since 3.0)
gridExt.grid.GridPanel 表格
editorgrid Ext.grid.EditorGridPanel可编辑的表格
propertygridExt.grid.PropertyGrid 属性表格
editor Ext.Editor 编辑器
dataviewExt.DataView数据显示视图
listviewExt.ListView列表视图
xtype Class 描述
paging Ext.PagingToolbar 分页工具条
toolbar Ext.Toolbar 工具栏
tbbuttonExt.Toolbar.Button 工具栏按钮
tbfill Ext.Toolbar.Fill工具栏填充区
tbitem Ext.Toolbar.Item工具条项目
tbseparator Ext.Toolbar.Separator 工具栏分隔符
tbspacerExt.Toolbar.Spacer 工具栏空白
tbsplit Ext.Toolbar.SplitButton 工具栏分隔按钮
tbtext Ext.Toolbar.TextItem工具栏文本项
xtype Class 描述
menuExt.menu.Menu 菜单
colormenu Ext.menu.ColorMenu 颜色选择菜单
datemenuExt.menu.DateMenu 日期选择菜单
menubaseitemBaseItem
menucheckitem Ext.menu.CheckItem 选项菜单项
menuitemExt.menu.Item
menuseparator Ext.menu.Separator 菜单分隔线
menutextitemExt.menu.TextItem 文本菜单项
xtype Class 描述
formExt.FormPanel/Ext.form.FormPanel表单面板
checkboxExt.form.Checkbox 多选框
combo Ext.form.ComboBox 下拉框
datefield Ext.form.DateField 日期选择项
timefield Ext.form.TimeField 时间录入项
field Ext.form.Field 表单字段
fieldsetExt.form.FieldSet 表单字段组
hidden Ext.form.Hidden 表单隐藏域
htmleditor Ext.form.HtmlEditor HTML 编辑器
label Ext.form.Label 标签
numberfield Ext.form.NumberField数字编辑器
radio Ext.form.Radio 单选按钮
textareaExt.form.TextArea 多行文本框
textfield Ext.form.TextField 表单文本框
trigger Ext.form.TriggerField 触发录入项
checkboxgroup Ext.form.CheckboxGroup 编组的多选框(Since 2.2)
displayfieldExt.form.DisplayField 仅显示,不校验/不被提交的文本框
radiogroup Ext.form.RadioGroup 编组的单选按钮(Since 2.2)
xtype Class 描述
chart Ext.chart.Chart 图表组件
barchartExt.chart.BarChart 柱状图
cartsianchart Ext.chart.CartesianChart
columnchart Ext.chart.ColumnChart
linechart Ext.chart.LineChart 连线图
piechartExt.chart.PieChart 扇形图
xtype Class 描述
arraystore Ext.data.ArrayStore
directstore Ext.data.DirectStore
groupingstore Ext.data.GroupingStore
jsonstore Ext.data.JsonStore
simplestore Ext.data.SimpleStore
store Ext.data.Store
xmlstoreExt.data.XmlStore