㈠ 有什么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 有很多各种表格样式,复制出来稍微修改下就可以了