可以用css中的百分比来做
提供个例子,来自javascript权威指南第五版:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- The drawing won't look right in IE without a doctype like this -->
<html>
<head>
<script language="JavaScript">
<!--
/**
* BarChart.js:
* This file defines makeBarChart( ), a function that creates a bar chart to
* display the numbers from the data[] array. The overall size of the chart
* is specified by the optional width and height arguments, which include the
* space required for the chart borders and internal padding. The optional
* barcolor argument specifies the color of the bars. The function returns the
* <div> element it creates, so the caller can further manipulate it by
* setting a margin size, for example. The caller must insert the returned
* element into the document in order to make the chart visible.
**/
function makeBarChart(data, width, height, barcolor) {
// Provide default values for the optional arguments
if (!width) width = 500;
if (!height) height = 350;
if (!barcolor) barcolor = "blue"; // The width and height arguments specify the overall size of the
// generated chart. We have to subtract the border and padding
// sizes from this to get the size of the element we create.
width -= 24; // Subtract 10px padding and 2px border left and right
height -= 14; // Subtract 10px top padding and 2px top and bottom border // Now create an element to hold the chart. Note that we make the chart
// relatively positioned so that it can have absolutely positioned children
// but still appear in the normal element flow.
var chart = document.createElement("div");
chart.style.position = "relative"; // Set relative positioning
chart.style.width = width + "px"; // Set the chart width
chart.style.height = height + "px"; // Set the chart height
chart.style.border = "solid black 2px"; // Give it a border
chart.style.paddingLeft = "10px"; // Add padding on the left
chart.style.paddingRight = "10px"; // and on the right
chart.style.paddingTop = "10px"; // and on the top
chart.style.paddingBottom = "0px"; // but not on the bottom
chart.style.backgroundColor = "white"; // Make chart background white // Compute the width of each bar
var barwidth = Math.floor(width/data.length);
// Find largest number in data[]. Note clever use of Function.apply( ).
var maxdata = Math.max.apply(this, data);
// The scaling factor for the chart: scale*data[i] gives height of a bar
var scale = height/maxdata; // Now loop through the data array and create a bar for each datum
for(var i = 0; i < data.length; i++) {
var bar = document.createElement("div"); // Create div for bar
var barheight = data[i] * scale; // Compute height of bar
bar.style.position = "absolute"; // Set bar position and size
bar.style.left = (barwidth*i+1+10)+"px"; // Add bar border and chart pad
bar.style.top = height-barheight+10+"px";// Add chart padding
bar.style.width = (barwidth-2) + "px"; // -2 for the bar border
bar.style.height = (barheight-1) + "px"; // -1 for the bar top border
bar.style.border = "solid black 1px"; // Bar border style
bar.style.backgroundColor = barcolor; // Bar color
bar.style.fontSize = "0px"; // IE workaround
chart.appendChild(bar); // Add bar to chart
} // Finally, return the chart element so the caller can manipulate it
return chart;
}
//-->
</script><script>
function drawChart( ) {
var chart = makeBarChart([1,2,4,8,16,32,64,128,256], 600, 300);
var container = document.getElementById("chartContainer");
container.appendChild(chart);
}
</script>
</head>
<body onload="drawChart( )">
<h2>y = 2<sup>n</sup></h2><!-- Chart title -->
<div id="chartContainer"><!-- Chart will go here --></div>
<!-- chart caption -->
<i>Note that each bar is twice as high as the one before ita
characteristic of exponential growth</i></html>
提供个例子,来自javascript权威指南第五版:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- The drawing won't look right in IE without a doctype like this -->
<html>
<head>
<script language="JavaScript">
<!--
/**
* BarChart.js:
* This file defines makeBarChart( ), a function that creates a bar chart to
* display the numbers from the data[] array. The overall size of the chart
* is specified by the optional width and height arguments, which include the
* space required for the chart borders and internal padding. The optional
* barcolor argument specifies the color of the bars. The function returns the
* <div> element it creates, so the caller can further manipulate it by
* setting a margin size, for example. The caller must insert the returned
* element into the document in order to make the chart visible.
**/
function makeBarChart(data, width, height, barcolor) {
// Provide default values for the optional arguments
if (!width) width = 500;
if (!height) height = 350;
if (!barcolor) barcolor = "blue"; // The width and height arguments specify the overall size of the
// generated chart. We have to subtract the border and padding
// sizes from this to get the size of the element we create.
width -= 24; // Subtract 10px padding and 2px border left and right
height -= 14; // Subtract 10px top padding and 2px top and bottom border // Now create an element to hold the chart. Note that we make the chart
// relatively positioned so that it can have absolutely positioned children
// but still appear in the normal element flow.
var chart = document.createElement("div");
chart.style.position = "relative"; // Set relative positioning
chart.style.width = width + "px"; // Set the chart width
chart.style.height = height + "px"; // Set the chart height
chart.style.border = "solid black 2px"; // Give it a border
chart.style.paddingLeft = "10px"; // Add padding on the left
chart.style.paddingRight = "10px"; // and on the right
chart.style.paddingTop = "10px"; // and on the top
chart.style.paddingBottom = "0px"; // but not on the bottom
chart.style.backgroundColor = "white"; // Make chart background white // Compute the width of each bar
var barwidth = Math.floor(width/data.length);
// Find largest number in data[]. Note clever use of Function.apply( ).
var maxdata = Math.max.apply(this, data);
// The scaling factor for the chart: scale*data[i] gives height of a bar
var scale = height/maxdata; // Now loop through the data array and create a bar for each datum
for(var i = 0; i < data.length; i++) {
var bar = document.createElement("div"); // Create div for bar
var barheight = data[i] * scale; // Compute height of bar
bar.style.position = "absolute"; // Set bar position and size
bar.style.left = (barwidth*i+1+10)+"px"; // Add bar border and chart pad
bar.style.top = height-barheight+10+"px";// Add chart padding
bar.style.width = (barwidth-2) + "px"; // -2 for the bar border
bar.style.height = (barheight-1) + "px"; // -1 for the bar top border
bar.style.border = "solid black 1px"; // Bar border style
bar.style.backgroundColor = barcolor; // Bar color
bar.style.fontSize = "0px"; // IE workaround
chart.appendChild(bar); // Add bar to chart
} // Finally, return the chart element so the caller can manipulate it
return chart;
}
//-->
</script><script>
function drawChart( ) {
var chart = makeBarChart([1,2,4,8,16,32,64,128,256], 600, 300);
var container = document.getElementById("chartContainer");
container.appendChild(chart);
}
</script>
</head>
<body onload="drawChart( )">
<h2>y = 2<sup>n</sup></h2><!-- Chart title -->
<div id="chartContainer"><!-- Chart will go here --></div>
<!-- chart caption -->
<i>Note that each bar is twice as high as the one before ita
characteristic of exponential growth</i></html>
应该和柱状报表差不多吧
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Thinking in VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
<script>
function drawLinesX(m)
{
count=0; //画横坐标
var textPoint=1;
for(var i=1;i<=10;i++){
var py=2750-i*245;
var strTo=m+" "+py;
var newLine = document.createElement("<v:line from='200 "+py+"' to='"+strTo+"' style='position:absolute;z-index:8'></v:line>");
group1.insertBefore(newLine);
if(count%2!=0){
var newStroke = document.createElement("<v:stroke color='#c0c0c0'>");
newLine.insertBefore(newStroke);
var newShape= document.createElement("<v:shape style='position:absolute;left:0;top:"+(py-50)+";WIDTH:1000px;HEIGHT:200px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>")
group1.insertBefore(newShape);
var newText = document.createElement("<v:textbox id='tx"+textPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:10pt;v-text-anchor:bottom-right-baseline'></v:textbox>");
newShape.insertBefore(newText);
newText.innerText=textPoint;
textPoint++;
}
else
{
var newStroke = document.createElement("<v:stroke dashstyle='dot' color='black'/>");
newLine.insertBefore(newStroke);
}
count++;
}
}
function drawLinesY(n)
{
var textPoint=1;
for(var i=1;i<=n;i++){
var py=170+i*300;
var newLine = document.createElement("<v:line from='"+py+" 2700' to='"+py+" 2750' style='position:absolute;z-index:8'></v:line>");
group1.insertBefore(newLine);
var newStroke = document.createElement("<v:stroke color='black'>");
newLine.insertBefore(newStroke);
var newShape= document.createElement("<v:shape style='position:absolute;left:"+(py-50)+";top:2750;WIDTH:200px;HEIGHT:150px;z-index:8' coordsize='21600,21600' fillcolor='white'></v:shape>")
group1.insertBefore(newShape);
var newText = document.createElement("<v:textbox id='ty"+textPoint+"' inset='3pt,0pt,3pt,0pt' style='font-size:9pt;v-text-anchor:bottom-right-baseline'></v:textbox>");
newShape.insertBefore(newText);
newText.innerHTML=textPoint;
textPoint++;
}
}
function drawBar(v,t)
{
var h=v*245-50;
var px=2750-v*245;
var py=170+t*300;
var newShape= document.createElement("<v:rect style='position:absolute;left:"+py+";top:"+px+";WIDTH:190px;HEIGHT:"+h+"px;z-index:9' coordsize='21600,21600' fillcolor='blue'></v:rect>")
group1.insertBefore(newShape);
}
function drawBars()
{
drawBar(6,1);
drawBar(5,2);
drawBar(6,3);
drawBar(8,4);
drawBar(3,5);
drawBar(1,6);
drawBar(9,7);
drawBar(2,8);
drawBar(6,9);
drawBar(5,10);
drawBar(7,11);
drawBar(3,12);
}
</script>
<body onload="drawLinesX(4500);drawLinesY(13)">
<div class="memo" style="width:700;line-height:23px">
<button onclick="drawBars()">显示柱状图</button>
<v:group ID="group1" style="WIDTH:700px;HEIGHT:500px" coordsize="4900,3500">
<v:line from="200,100" to="200,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
<v:stroke StartArrow="classic"/>
</v:line>
<v:line from="200,2700" to="4500,2700" style="Z-INDEX:8;POSITION:absolute" strokeweight="1pt">
<v:stroke EndArrow="classic"/>
</v:line>
<v:rect style="WIDTH:4600px;HEIGHT:2900px" coordsize="21600,21600" fillcolor="white" strokecolor="black">
<v:shadow on="t" type="single" color="silver" offset="4pt,3pt"></v:shadow>
</v:rect>
<v:shape style="position:absolute;left:50;top:2650;WIDTH:1000px;HEIGHT:200px;z-index:8" coordsize="21600,21600" fillcolor="white">
<v:textbox id="text1" inset="3pt,0pt,3pt,0pt" align="center" style="font-size:10pt;v-text-anchor:bottom-center-baseline">0</v:textbox>
</v:shape>
</v:group></div></body>
</html>