html5怎么制作漂亮的饼状 报表

html-css017

html5怎么制作漂亮的饼状 报表,第1张

利用canvas可以制作饼状 报表等,需要学习HTML5/CSS3/Javascript等知识,如果学习可以看下这方面的视频教程。

如是用作项目,可直接用现成插件,如百度echarts等

1、数据准备

在制作图表前,需要先定义图表的数据来源。新建工作簿,添加数据集,SQL语句为SELECT*FROM[销量],使用销量表作为图表的数据来源。

2、插入图表并选择图表类型

点击工具栏中的插入>悬浮元素>插入图表,弹出图表向导,选择图表类型如柱形图,如下图:

3、定义图表样式

选择完图表类型后,点击确定,返回报表主体界面,选中悬浮图表,在报表主体右侧上方的图表属性表中设置图表属性,选择图表属性表-数据,设置柱形图的数据,如下图:

4、设置图表样式

对图表标题、标签等样式进行相应的设置

5、保存模板并预览。

嗯,报表控件与图表控件还是不一样的。

但是你以加了个“图形界面比较好”,比较费解。我估计你的意思还是图表控件。

然后你也没有讲明白有啥条件限制,我估计你是JavaScript 图表插件,好吧。

好的插件有很多。以下有10个非常酷的JavaScript图表库,有简单的也有复杂的,以满足不同的需求。

个人还是很推荐highcharts的,RGraph很炫,

1. Cubism.js

一个基于D3.js的插件,可以实时显示时间序列。D3.js是一个针对HTML和SVG的JavaScript可视化库。

2. RGraph

一个HTML5 JavaScript图表库,支持20多种不同类型的图表。

3. Cytoscape Web

一个开源的图形可视化库,基于jQuery编写。

4. sigma.js

一个开源的轻量级JavaScript库,使用HTML canvas元素来绘制图形。

5. Morris.js

一个小巧的、效果漂亮的JavaScript库,用于可视化时间序列数据。

6. Timeplot

基于DHTML的AJAX部件,用于绘制时间序列,并在上面叠加基于时间的事件。

7. Dracula

一套用于显示和设计交互式图表的工具,包含了各种不同的算法。无需Flash、Java和其他插件。

8. gRaphael

一个开源的JavaScript图表库,基于Raphael(拉斐尔)JavaScript库。

9. gvChart

一个jQuery插件,使用谷歌的Charts API以及HTML <table>标记中的数据,来创建交互式、可视化的图表。

10. jQuery Highcharts Table

简易,漂亮,该插件可以将HTML表格中的数据自动转换成图表,也可以抓取excel,连数据库也没有问题。