其实javascript写条形图形，其实际上是对样式CSS的控制。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">
function markbarchar(data, width, height, color) {
if (!width) width = 500;
if (!height) height = 300;
if (!color) color = 'blue';
width = width - 22;
height = height - 22;
var chart = document.createElement("div");
chart.style.position = "relative";
chart.style.width = width + "px";
chart.style.height = height + "px";
chart.style.border = "1px solid black";
chart.style.paddingLeft = "10px";
chart.style.paddingRight = "10px";
chart.style.paddingTop = "10px";
chart.style.paddingBottom = "0px";
chart.style.backgroungColor = "white";
var barwidth = Math.floor(width / data.length);
var maxdata = Math.max.apply(this, data);
var scale = height / maxdata;
for (var i = 0; i < data.length; i++) {
var bar = document.createElement("div");
var barheight = scale * data[i];
bar.style.position = "absolute";
bar.style.left = (barwidth * i + 1 + 10) + "px";
bar.style.top = height - barheight + 10 + "px";
bar.style.border = " solid red 1px";
bar.style.width = (barwidth - 2) + "px";
bar.style.height = (barheight - 1) + "px";
bar.style.backgroundColor = color;
bar.style.fontSize = "1px";
chart.appendChild(bar);
}
document.body.appendChild(chart);
return chart;
}
</script>
</head>
<body>
<script type="text/javascript">markbarchar([1, 2, 4, 8, 16, 32, 64, 128, 256]);</script>
</body>
</html>
2437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
