CSS柱狀圖代碼

2024-09-05 12:17:06

字體：大中小

供稿：網(wǎng)友

在一個(gè)國(guó)外的網(wǎng)站下載的CSS柱狀圖特效，有橫向有豎向的，自帶的功能演示基本包括了常見(jiàn)的柱狀圖風(fēng)格，演示頁(yè)面內(nèi)可選擇不同的效果進(jìn)行預(yù)覽，內(nèi)容較多，想用哪一種風(fēng)格了要自己把代碼復(fù)制出來(lái)。

<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   class="iwvjtn8m0"   id="dvChart"></div>					</td>				</tr>				<tr>					<td width="100%">						<hr>					</td>				</tr>				<tr>					<TD align="left"> <font color="blue">Autofill with 								random data</font>   <font color="blue">								Single Horizontal Bar chart</font>   							<font color="blue">Double Horizontal Bar chart</font>					</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定義鼠標(biāo)移上圖片鏈接，出現(xiàn)邊框效果

下一篇：CSS cursor 屬性演示代碼