CSS柱状图代码

2020-01-27 14:18:51

字体：大中小

来源：转载

供稿：网友

在一个国外的网站下载的CSS柱状图特效，有横向有竖向的，自带的功能演示基本包括了常见的柱状图风格，演示页面内可选择不同的效果进行预览，内容较多，想用哪一种风格了要自己把代码复制出来。

<html><HEAD><TITLE>Client-Side Horizontal Bar Charts</TITLE><script language="javascript">		var Content;var rowHTML;var chartMaxValue = 500;var chartHeight = 300;var colNum;var barHeight = 5;var XAxisScale = 5;function GenerateChart(nSeriesType, nSeriesCount){		VerY = new Array();	HorX1 = new Array();	HorX2 = new Array();	var j = 0;		colNum = document.f1.numvalue1.length;	for(i = 0; i < colNum; i++){		if (document.f1.numvalue1[i].value != '' && parseInt(document.f1.numvalue1[i].value) >= 0){			VerY[j] = document.f1.label[i].value;			HorX1[j] = document.f1.numvalue1[i].value;			HorX2[j] = document.f1.numvalue2[i].value;			j++;		}	}	colNum = VerY.length;		if (colNum == 0){		alert ("No data found.");	} else {		if (nSeriesType == 2)		{					Content = "<html><head><title>Horizontal Chart</title></head><body bgcolor=white text=black>";			if (document.getElementById("chkseparators").checked == true)				Content += "<table id=tblgraph style='background-color:#C0C0C0;' align=center width=" + (chartMaxValue+40) + " cellpadding=1 cellspacing=0 border=1>";						else				Content += "<table id=tblgraph style='background-color:#C0C0C0;' align=center width=" + (chartMaxValue+40) + " cellpadding=1 cellspacing=0 border=0>";									for (i = 0; i < VerY.length; i++){				w = parseInt(HorX1[i]);					w2 = parseInt(HorX2[i]);					rowHTML = "";				rowHTML += "<tr style='width:100%'>";							rowHTML+= "<td align=right><div style='background-color:#C0C0C0; width:40; height:" + (barHeight-2) + ";'><font face=arial size='-2'>" + VerY[i] + "</font></div></td>";								if ( nSeriesCount == 1 )				{					rowHTML+= "<td align=left width=" + (chartMaxValue) + " height=" + (barHeight-2) + " colspan=" + XAxisScale + ">";						if (w>2)						rowHTML+= "<div style='background-color:blue; width:" + (w-1) + ";' />";									rowHTML+= "<p style='position:relative; left:" + w + "'><font face=arial size='-2'> "						// See if Values needs to be displayed on graphs						if (document.getElementById("chkvaluepoint").checked == true)						rowHTML+=  HorX1[i] 					rowHTML+= "</font></p>";				}				else								{			rowHTML+= "<td align=left width=" + (chartMaxValue) + " height=" + ((barHeight*2)-2) + " colspan=" + XAxisScale + ">";							rowHTML+= "<table cellpadding=o cellspacing=0 border=0><tr><td>";					if (w>2)				rowHTML+= "<div style='background-color:blue; width:" + (w-1) + ";' />";						rowHTML+= "<p style='position:relative; left:" + w + "'><font face=arial size='-2'> "						// See if Values needs to be displayed on graphs						if (document.getElementById("chkvaluepoint").checked == true)						rowHTML+=  HorX1[i] 					rowHTML+= "</font></p>";										// Add the Second Green DIV					rowHTML += "</td></tr><tr><td>";					 					if (w2>2)						rowHTML+= "<div style='background-color:Green; width:" + (w2-1) + ";' />";														// Display Value for each bar in graph						rowHTML+= "<p style='position:relative; left:" + w2 + "'><font face=arial size='-2'> "						// See if Values needs to be displayed on graphs						if (document.getElementById("chkvaluepoint").checked == true)						rowHTML+=  HorX2[i] 					rowHTML+= "</font></p>";										rowHTML += "</td></tr></table>";				}													rowHTML+= "</td></tr>";												Content += rowHTML;							}						Content += "<tr bgcolor=#C0C0C0>";			Content += "<td align=right><div><font face=arial size='-2'> </font></div></td>";											for (i = 1; i <= XAxisScale; i++){			if (document.getElementById("chkseparators").checked == true)				Content += "<td align=right><div style='background-color:#C0C0C0; width:" + parseInt(chartMaxValue/XAxisScale - 4) + "; height:" + (barHeight-2) + ";'><font face=arial size='-2'>" + parseInt(i * chartMaxValue / XAxisScale) + "</font></div></td>";								else				Content += "<td align=right><div style='background-color:#C0C0C0; width:" + parseInt(chartMaxValue/XAxisScale - 4) + "; height:" + (barHeight-2) + ";'><font face=arial size='-2'>" + parseInt(i * chartMaxValue / XAxisScale) + "|</font></div></td>";								}						Content += "</tr>";				Content += "</table>";									if (document.getElementById("optShowInSameWindow").checked == true)			   				    document.getElementById("dvChart").innerHTML = Content;				else			{								if ( nSeriesCount == 1 )				{				newWin1 = open('','chart1',"width=" + (chartMaxValue + 175) + ",height=320,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");				}				else				{		newWin1 = open('','chart1',"width=" + (chartMaxValue + 175) + ",height=450,top=0,left=0,scrollbars=yes, scroll=yes,toolbar=no");				}				newWin1.document.write(Content);				newWin1.document.close();				newWin1.focus();			}					} 			}}function autofill(){	arrMonths = new Array("Jan 07", "Feb 07", "Mar 07", "Apr 07", "May 07", "Jun 07", "Jul 07", "Aug 07", "Sep 07", "Oct 07", "Nov 07", "Dec 07", "Jan 07", "Feb 07", "Mar 07", "Apr 07", "May 07", "Jun 07", "Jul 07", "Aug 07", "Sep 07", "Oct 07", "Nov 07", "Dec 07");	for (i = 0; i < 12; i++){		document.f1.label[i].value = arrMonths[i];		document.f1.numvalue1[i].value = parseInt(Math.random() * chartMaxValue);		document.f1.numvalue2[i].value = parseInt(Math.random() * chartMaxValue);	}	}		</script>	</HEAD>	<body onload="autofill()">		<form name="f1">			<table style="FONT-SIZE: 10pt; FONT-FAMILY: Arial; POSITION: absolute; ; TOP: expression(document.all('dvChart').clientTop + document.all('dvChart').clientHeight + 10)"				bgColor="#9999ff" valign="top">				<tr>					<td width="100%">						<hr>					</td>				</tr>				<tr>					<td align="center"><STRONG><FONT size="4">HTML Horizontal Bar Chart Demo</FONT></STRONG>						<br>						by Neeraj Saluja					</td>				</tr>				<tr>					<td width="100%">						<hr>					</td>				</tr>				<tr>					<td>						<div id="dvChart"></div>					</td>				</tr>				<tr>					<td width="100%">						<hr>					</td>				</tr>				<tr>					<TD align="left"> <A href="javascript:autofill();"><font color="blue">Autofill with 								random data</font></A>   <A href="javascript:GenerateChart(2,1);"><font color="blue">								Single Horizontal Bar chart</font></A>   <A href="javascript:GenerateChart(2,2);">							<font color="blue">Double Horizontal Bar chart</font></A>					</TD>				</tr>				<tr>					<td colSpan="5"><input id="chkvaluepoint" type="checkbox" CHECKED name="chkvaluepoint">						<label for="chkvaluepoint">Show values on line </label><input id="chkseparators" type="checkbox" CHECKED name="chkseparators">						<label for="chkseparators">Line separators </label><input id="optShowInSameWindow" type="radio" name="opt">						<label for="optShowInSameWindow">Show Chart in Same       Window</label>						<input id="optShowInNewWindow" type="radio" CHECKED name="opt">						<label for="optShowInNewWindow">Show Chart in New Window</label>					</td>				</tr>				<tr>					<td width="100%">						<hr>					</td>				</tr>				<tr>					<td>						<table style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">							<tr align="center">								<td>Y Axis Values</td>								<td>X Axis Series 1</td>								<td>X Axis Series 2</td>								<td></td>							</tr>							<tr>								<td><input type="text" size="4" name="label"></td>								<td><input type="text" size="4" name="numvalue1"></td>								<td><input type="text" size="4" name="numvalue2"></td>								<td></td>								<td vAlign="top" align="left" height="387" rowSpan="15">Getting started									<OL>										<LI>										By default the random data is loaded for Y Axis Values and Y Axis Values 										on page (body) load. To further randomise the date, click on the the 										link "Autofill with random data". It will fill the data with Labels for X axis 										as Jan 07 to Dec 07, and random values between 0 and 500 for X Axis.										<LI>											Click on the link "Single Or Double Horizontal Bar Chart"										</LI>									</OL>									<P>Key Notes									</P>									<OL>										<li>										This Charts Generation is completely javascript based do not need any third 										party tool										<li>										Since this chart generation is HTML/Javascript based, it can clubbed with any 										web development tools/technology like ASP, ASP.NET, JSP etc to generate the 										charts										<li>										Like many chart tools, it does not produce any chart image.										<LI>											For best results, limit the division										</LI>									</OL>									<P> Scope of Enhancements </P>									<OL>										<LI>											Optional Legends can be added</LI></OL>									<P>Request for Feedback :: Please spare some time to give feedback about this 										tool. Your couple of minutes can help in enhancing the quality of this tool</P>									<P>Thanks										<br>										Neeraj Saluja									</P>								</td>							</tr>							<tr>								<td><input type="text" size="4" name="label"></td>								<td><input type="text" size="4" name="numvalue1"></td>								<td><input type="text" size="4" name="numvalue2"></td>								<td></td>							</tr>							<tr>								<td><input type="text" size="4" name="label"></td>								<td><input type="text" size="4" name="numvalue1"></td>								<td><input type="text" size="4" name="numvalue2"></td>								<td></td>							</tr>							<tr>								<td><input type="text" size="4" name="label"></td>								<td><input type="text" size="4" name="numvalue1"></td>								<td><input type="text" size="4" name="numvalue2"></td>								<td></td>							</tr>							<tr>								<td><input type="text" size="4" name="label"></td>								<td><input type="text" size="4" name="numvalue1"></td>								<td><input type="text" size="4" name="numvalue2"></td>								<td></td>							</tr>							<tr>								<td><input type="text" size="4" name="label"></td>								<td><input type="text" size="4" name="numvalue1"></td>								<td><input type="text" size="4" name="numvalue2"></td>								<td></td>							</tr>							<tr>								<td><input type="text" size="4" name="label"></td>								<td><input type="text" size="4" name="numvalue1"></td>								<td><input type="text" size="4" name="numvalue2"></td>								<td></td>							</tr>							<tr>								<td><input type="text" size="4" name="label"></td>								<td><input type="text" size="4" name="numvalue1"></td>								<td><input type="text" size="4" name="numvalue2"></td>								<td></td>							</tr>							<tr>								<td><input type="text" size="4" name="label"></td>								<td><input type="text" size="4" name="numvalue1"></td>								<td><input type="text" size="4" name="numvalue2"></td>								<td></td>							</tr>							<tr>								<td><input type="text" size="4" name="label"></td>								<td><input type="text" size="4" name="numvalue1"></td>								<td><input type="text" size="4" name="numvalue2"></td>								<td></td>							</tr>							<tr>								<td><input type="text" size="4" name="label"></td>								<td><input type="text" size="4" name="numvalue1"></td>								<td><input type="text" size="4" name="numvalue2"></td>								<td></td>							</tr>							<tr>								<td><input type="text" size="4" name="label"></td>								<td><input type="text" size="4" name="numvalue1"></td>								<td><input type="text" size="4" name="numvalue2"></td>								<td></td>							</tr>						</table>					</td>				</tr>			</table>		</form>	</body></html>

上一篇：CSS cursor 属性演示代码

下一篇：CSS定义鼠标移上图片链接，出现边框效果