html生成图表(html 生成图片)
如何创建网页图表
对许多不熟悉HTML的朋友来说，还以为是使用了CSS、JavaScript等技术，其实不然。 看完下面的内容你就会明白了。
控制表格边框的显示
对使用Dreamweaver、FrontPage等所见即所得的网页编辑软件的朋友来说，很难控制表格的上下左右的边框显示与隐藏，其实你只要在HTML中的〈table〉〈/table〉标签页中添加一项 “frame” 属性即可。
不显示表格边框(frame=void)
只显示表格的上边框(frame=above )
只显示表格的下边框(frame=below )
只显示表格的上下边框(frame=hsides)
只显示表格的左右边框(frame=vsides)
只显示表格的左边框(frame=lhs)
只显示表格的右边框(frame=rhs)
例如，〈table width="75%" border="1" frame=void/above/below/hsides/vsides/lhs/rhs cellpadding="0" cellspacing="0"〉〈/table〉控制表格行与列的分割线
在网页设计中，如果版面没设计好，那么这个网页可以说是失败的。利用表格进行分栏，可以达到整齐排版的目的，美化你的网页外观。所谓分栏，就是让你的网页变成一个大表格，然后根据你的版面设计和内容安排，将这个表格分成不同的行和列，调整各个行和列的宽度和高度，以达到你排版的要求。当然了，你还可以在表格之中再嵌套表格，以达到更加复杂的排版需要。在设计过程中你可以灵活设置单元格边距和单元格间距的数值。在HTML语言中表格的分割线是由“rules” 属性来决定的。所以我们可以通过手工修改源代码的方法来控制分割线的显示与隐藏。
1、显示所有分割线(rules=all)
如〈table width="75%" border="1" rules=all cellpadding="0" cellspacing="0"〉
2、不显示任何分割线(rules=none)
3、只显示行与行之间的分割线(rules=rows)
4、只显示列与列之间分割线(rules=cols)
用表格边框实现单线显示
用线条来美化网页是网页设计者经常使用的手法之一。在网页中除了用〈hr〉标记来实现插入水平线外，我们还可以用表格来实现。FrontPage 2000默认的表格线比较粗，但只要稍加处理，就可以制作出一个细线表格，细线表格非常娟秀小巧，很有个性。它的具体操作方法是：在表格属性中将边框粗细设为“1”，将单元格边距和单元格间距设置为“0”，同时将亮边框设置成与表格背景相同的颜色，暗边框设成你想要的任一颜色即可，怎么样，细线表格出现了吧。
如何用FineReport开发html5图表
1、数据准备
在制作图表前，需要先定义图表的数据来源。新建工作簿，添加数据集，SQL语句为SELECT*FROM[销量]，使用销量表作为图表的数据来源。
2、插入图表并选择图表类型
点击工具栏中的插入悬浮元素插入图表，弹出图表向导，选择图表类型如柱形图，如下图：
3、定义图表样式
选择完图表类型后，点击确定，返回报表主体界面，选中悬浮图表，在报表主体右侧上方的图表属性表中设置图表属性，选择图表属性表-数据，设置柱形图的数据，如下图：
4、设置图表样式
对图表标题、标签等样式进行相应的设置
5、保存模板并预览。
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新特性的讲解。
我想做一个图表，然后图表下面会显示原始的数据。如下图
1、选中已经生成的图表，在“图表工具”选项下的“设计”选项中，左侧是“添加图表元素”，选择“数据表”，即可在原图表下方生成对应的数据表。
2、选中已经生成的图表，在图表右上方一个+号（是“添加图表元素”），选择“数据表”，即可在原图表下方生成对应的数据表。