近来对JS绘制图表很感兴趣,想知道是怎么实现的。
我稍微了解了一下,网上有很多插件,例如Flot是用canvas实现的,在IE中用VML。还有一种SVG语言也可以绘图。我想知道还有其他的实现方法吗?
我尝试了用div当作一个点来画,柱状图没问题,折线效果就不好,曲线更不知道怎么画。如果还有其他方法,请说一下大致方向,或者发一下相关链接。谢谢。
我稍微了解了一下,网上有很多插件,例如Flot是用canvas实现的,在IE中用VML。还有一种SVG语言也可以绘图。我想知道还有其他的实现方法吗?
我尝试了用div当作一个点来画,柱状图没问题,折线效果就不好,曲线更不知道怎么画。如果还有其他方法,请说一下大致方向,或者发一下相关链接。谢谢。
如下例子:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
/*js绘制表格斜线方法
--注意,一定要以此作为页面的文档类型标准--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
*/
function drawPointer(xPos, yPos, color) {
//div模拟出一个点
return "<div name='divline' style='position:absolute;left:" + xPos + ";top:" + yPos + ";clip:rect(0,1px,1px,0);width:1px;height:1px;background-color: " + color + ";overflow:hidden;'></div>";
//也可采用img来实现一个像素的点
//return "<img border='0' name='imgline' style='position: absolute; left: " + xPos + "; top: " + yPos + ";background-color: " + color + "' width=1 height=1>";
}function drawLine(xStart, yStart, xEnd, yEnd, color) {
var tmp;
if (xStart >= xEnd) {
tmp = xStart;
xStart = xEnd;
xEnd = tmp;
tmp = yStart;
yStart = yEnd;
yEnd = tmp;
}
var strLines = "";
for (var i = xStart; i <= xEnd; i++) {
var x = i;
var y = (yEnd - yStart) / (xEnd - xStart) * (x - xStart) + yStart;
strLines += drawPointer(x, y, color);
} return strLines;
//document.write(strLines);
//document.body.innerHTML += strLines;
}//获取该元素的具体坐标位置
function getPos(obj) {
var left = 0;
var top = 0; while (obj.offsetParent) {
left += obj.offsetLeft;
top += obj.offsetTop;
obj = obj.offsetParent
}
//alert(left+"|"+top);
return [left, top];
}
/*
drawTableDiagonal方法参数说明
tdname:单元格名字
leftContent:左边放置的文字内容
rightContent:右边放置的文字内容
color:线条颜色(若没有该参数,则默认黑色)
fontSize:字体大小(若没有该参数,则默认该页面上的字体大小)
*/function drawTableDiagonal(tdname,leftContent, rightContent, color,fontSize) {
var currentTd = document.getElementById(tdname);
if (currentTd != null) {
if (color == "" || color==null) color = "black";
if (fontSize == "" || fontSize==null) {
strFontSize = "";
} else {
strFontSize = "font-size:" + fontSize;
}
//每次都要先清空内部所有,然后灌注相应内容
currentTd.innerHTML = "";
var tmpTable = "<table cellpadding='0' cellspacing='0' border='0' style=\"width:100%; height:100%\">";
tmpTable += "<tr><td></td>";
tmpTable += "<td style=\"text-align:right;" + strFontSize + "\">" + rightContent + "</td>";
tmpTable += "</tr><tr>"
tmpTable += "<td style=\"text-align:left;" + strFontSize + "\">" + leftContent + "</td>";
tmpTable += "<td></td></tr></table>";
currentTd.innerHTML += tmpTable;
var objPos = getPos(currentTd);
var strLines=drawLine(objPos[0], objPos[1], objPos[0] + currentTd.offsetWidth, objPos[1] + currentTd.offsetHeight, color); //'#000000'
currentTd.innerHTML += strLines;
}
else {
alert("需要绘制斜线的单元格不存在!");
}
} </script>
<style type="text/css">
.style1
{
text-align: center;
}
.style2
{
font-size: large;
font-weight: bold;
}
</style>
</head>
<script type="text/javascript" >
function setTdDiagonal() {
drawTableDiagonal('tableDiagonal', '行业类型', '所属区域', 'red', '12px');
drawTableDiagonal('Td1', '许可证类型', '月份', 'black');
}
</script>
<body onload="setTdDiagonal()" onresize="setTdDiagonal()">
<form id="form1" runat="server">
<div class="style1">
<span class="style2">单元格绘制斜线demo
</span>
<br/><br/><br/><br/>
</div>
<table border="0" bgcolor="000000" cellspacing="1" style="width: 100%;">
<tr bgcolor="FFFFFF">
<td id="tableDiagonal">
</td>
<td>
危险化学品经营企业</td>
<td>
2</td>
<td>
3</td>
<td>
4</td>
<td>
5</td>
</tr>
<tr bgcolor="FFFFFF">
<td>
危险化学品经营企业</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr bgcolor="FFFFFF">
<td>
危险化学品经营企业</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr bgcolor="FFFFFF">
<td>
危险化学品经营企业</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr bgcolor="FFFFFF">
<td>
危险化学品经营企业</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<br/>
<table border="0" bgcolor="000000" cellspacing="1" style="width: 100%;">
<tr bgcolor="FFFFFF">
<td id="Td1">
</td>
<td>
危险化学品经营企业</td>
<td>
2</td>
<td>
3</td>
<td>
4</td>
<td>
5</td>
</tr>
<tr bgcolor="FFFFFF">
<td>
危险化学品经营企业</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr bgcolor="FFFFFF">
<td>
危险化学品经营企业</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr bgcolor="FFFFFF">
<td>
危险化学品经营企业</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr bgcolor="FFFFFF">
<td>
危险化学品经营企业</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</form>
</body>
</html>
http://www.nfan.org/bbs/061214132216828_files/061214132216875scriptswz_jsgraphics.zipwz_jagraphics.js 是一个js的画图插件类。js的能力是有限的,别让他去做他做起来费力的事情,做动画,你可以选择vml,flash,silverlight,flex等等。
http://www.scriptlover.com/controls/highcharts/index.htm可以帮到你