html5报表
㈠ 有什么html5图表效果比较好的图表工具么
可以用FineReport。FineReport的图表就是html5图表技术实现的,图表功能比较强大,参数传递灵活,回且有移动版,最关键的答是,完全符合楼主的开发量少的要求!刚刚特地去官网确认了一下,FineReport的基本理念就是零代码。其实严格来说,FineReport是一款专门做报表的工具,但报表中一般图、表共存,所以FineReport的图和表的功能都比较强了~
㈡ html5怎么制作漂亮的饼状 报表
利用canvas可以制作饼状 报表等,需要学习HTML5/CSS3/Javascript等知识,如果学习可以看下这方面的视频教程。
如是用作项目,可直接用现成插件,如网络echarts等
㈢ html5 怎么写如下表格。tr分上下两栏这种。
<html>
<body>
<tablewidth="100%"border="1">
<tr>
<tdrowspan="2">序号</td>
<tdrowspan="2">项目名抄称</td>
<tdrowspan="2">单位</td>
<tdcolspan="3">预算<tr><td>型号</td><td>数量</td><td>单位</td></tr></td>
</tr>
</table>
</body>
</html>
这里不止跨行还要跨列
㈣ html5表格
给你写了个简单的课程表样式的表格
看一下
<style type="text/css">
table { border-collapse:collapse;text-align:center; vertical-align:middle;}
table tr{ height:25px;}
table td{ width:100px;}
.bg1{ background:#ccc;}
table tr:hover{ background:#09C;}
.bg2{ background:#999;}
.t1,.t2,.t3,.t4,.b1,.b2,.b3,.b4,.tab{ display:block; overflow:hidden;}
.t1,.t2,.t3,.b1,.b2,.b3{ height:1px;}
.t2,.t3,.t4,.b2,.b3,.b4,.tab{ border-left:2px solid #f6f; border-right:2px solid #f6f;}
.t1,.b1{ margin:0 5px; background: #F6F;}
.t2,.b2{ margin:0 3px; border-width:2px;}
.t3,.b3{ margin:0 2px;}
.t4,.b4{ height:2px; margin:0 1px;}
.tab{ height:130px; background:#F7F8F9;}
.tab_width{ width:700px; margin:0 auto; cursor:pointer;}
</style>
<div class="tab_width">
<b class="t1"></b><b class="t2"></b><b class="t3"></b><b class="t4"></b>
<div class="tab">
<table>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr class="bg1">
<td>国学</td>
<td>数学</td>
<td>英语</td>
<td>多媒体</td>
<td>体育</td>
<td>毛概</td>
<td>实验</td>
</tr>
<tr class="bg2">
<td>国学</td>
<td>数学</td>
<td>英语</td>
<td>多媒体</td>
<td>体育</td>
<td>毛概</td>
<td>实验</td>
</tr>
<tr class="bg1">
<td>国学</td>
<td>数学</td>
<td>英语</td>
<td>多媒体</td>
<td>体育</td>
<td>毛概</td>
<td>实验</td>
</tr>
<tr class="bg2">
<td>国学</td>
<td>数学</td>
<td>英语</td>
<td>多媒体</td>
<td>体育</td>
<td>毛概</td>
<td>实验</td>
</tr>
</table>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
提问者评价
谢谢了···
㈤ HTML5中如何绘制图表
图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等,如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图,然后加载到Canvas上就可以了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制图表</title>
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
// 1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的图片对象。
var
canvas = document.getElementById('canvas'),
context = null;
context = canvas.getContext('2d');
var img = new Image();
img.src ='chart-background.png';//这里是一张具有图表背景的图片
// 2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。
img.onload = function() {
//绘制图片
context.drawImage(img, 0, 0);
//绘制直线
context.beginPath();
context.moveTo(70, 105);
context.lineTo(105, 132);
context.lineTo(142, 250);
context.lineTo(176, 175);
context.lineTo(212, 145);
context.lineTo(245, 197);
context.lineTo(280, 90);
context.stroke();
}
</script>
<script src="jquery.js"></script>
</body>
</html>
3、本示例的最终绘制效果如下:这样一个曲线图表就绘制出来的,其他的图表也可以用类似的方法进行绘制。
这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学,该网站上有关于HTML5新特性的讲解。
㈥ html做个表格代码
html做个表格的步骤如下:
1、首先新建一个html,点击<body></body>中间,先填入表格内容;
㈦ 目前在做HTML5,报表控件暂时选为HighCharts(图形界面比较好),不知道有没有比这更好的报表控件
嗯,报表控件与图表控件还是不一样的。
但是你以加了个“图形界面比较好”,比较费解。我估计你的意思还是图表控件。
然后你也没有讲明白有啥条件限制,我估计你是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,连数据库也没有问题。
㈧ html5,table表格
你好!
<style>
table{
font-family:arial,宋体,sans-serif;
border-spacing:0;
border-collapse:collapse;
}
tbody{
display:table-row-group;
vertical-align:middle;
border-color:inherit;
}
td,
th{
display:table-cell;
vertical-align:inherit;
}
tableth,
tabletd{
padding:2px10px;
font-size:12px;
line-height:22px;
height:22px;
border:1pxsolid#e6e6e6;
}
tableth{
border-bottom:1pxsolid#e6e6e6;
text-align:left;
font-weight:700;
height:23px;
background-color:#f8f8f8;
}
table.table-view{
margin:5px0;
border-collapse:collapse;
word-wrap:break-word;
word-break:break-all;
font-size:12px;
line-height:22px;
color:#000;
}
caption{
display:table-caption;
text-align:-webkit-center;
}
tablecaption{
font-weight:700;
padding:10px0;
padding:8px09px;
font-size:14px;
}
tablea{
color:#136ec2;
text-decoration:none;
}
</style>
<tablelog-set-param="table_view"class="table-viewlog-set-param">
<caption>金满贯</caption>
<tbody>
<tr>
<thheight="0"align="left">
<divclass="para"label-mole="para">网球奖项</div>
<divclass="para"label-mole="para">(英文)</div>
</th>
<thheight="0"align="left">
<divclass="para"label-mole="para">网球奖项</div>
<divclass="para"label-mole="para">(中文)</div>
</th>
<th>分类</th>
<thheight="0"align="left">信息</th>
</tr>
<tr>
<tdwidth="100"height="0"align="left"valign="center"rowspan="2"><b>GoldenSlam</b></td>
<tdwidth="87"height="0"align="left"valign="center"rowspan="2">
<divclass="para"label-mole="para"><atarget="_blank"href="/item/%E9%87%91%E6%BB%A1%E8%B4%AF"><b>金满贯</b></a></div>
<divclass="para"label-mole="para"><b>★★★★</b></div>
</td>
<tdwidth="91"align="left"valign="center">年度金满贯</td>
<tdvalign="top"align="left"width="354">
<divclass="para"label-mole="para">(年度金满贯:是指一位选手在一个赛季里(一年)同时获得所有四大满贯赛事的冠军和<atarget="_blank"href="/item/%E5%A4%8F%E5%AD%A3%E5%A5%A5%E6%9E%97%E5%8C%B9%E5%85%8B%E8%BF%90%E5%8A%A8%E4%BC%9A">夏季奥林匹克运动会</a>网球项目金牌。)</div>
</td>
</tr>
<tr>
<tdwidth="91"align="left"valign="center">职业金满贯</td>
<tdwidth="354"align="left"valign="center">(职业金满贯:是指一位选手在职业生涯中非连续夺得所有四大满贯赛事的冠军和<atarget="_blank"href="/item/%E5%A4%8F%E5%AD%A3%E5%A5%A5%E6%9E%97%E5%8C%B9%E5%85%8B%E8%BF%90%E5%8A%A8%E4%BC%9A">夏季奥林匹克运动会</a>网球项目金牌。)</td>
</tr>
</tbody>
</table>
希望对你有帮助!
㈨ HTML5 table 表格如何做
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
你分的网格错误了,每一行最多有12列
希望对你有帮助,望点赞!
㈩ html5怎么做图表
highcharts 有很多各种表格样式,复制出来稍微修改下就可以了