CSS生成图表和曲线，包括圆形百分比

2020-01-27 14:20:39

字体：大中小

来源：转载

供稿：网友

测试CSS的画图功能，用它生成一个图表，包括数据曲线、圆形百分比饼图，CSS需要和JS配合才能完成。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>CSS数据画图，包括圆形百分比</TITLE><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><SCRIPT LANGUAGE="JavaScript"></SCRIPT><style>.emuW{position:absolute;font-size:1px;width:1}.emuH{position:absolute;font-size:1px;height:1}.emuWH{position:absolute;font-size:1px;width:1;height:1}A{text-decoration:none;color:#FF66FF}</style><SCRIPT LANGUAGE="JavaScript"></SCRIPT></HEAD><BODY><TABLE bgcolor=black cellspacing=1>	<TR bgcolor=#FFFFCC>		<TD>销售额</TD>		<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">1月</A></TD>		<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">2月</A></TD>		<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">3月</A></TD>		<TD onclick="drawCol(this)" align=center><A HREF="javascript:;">4月</A></TD>	</TR>	<TR bgcolor=#CCFFCC>		<TD onclick="drawRow(this)"><A HREF="javascript:;">整机</A></TD>		<TD>678432</TD>		<TD>981233</TD>		<TD>543215</TD>		<TD>323211</TD>	</TR>	<TR bgcolor=#CCCCFF>		<TD onclick="drawRow(this)"><A HREF="javascript:;">显示器</A></TD>		<TD>78905</TD>		<TD>67534</TD>		<TD>98654</TD>		<TD>123454</TD>	</TR>	<TR bgcolor=#FFCCCC>		<TD onclick="drawRow(this)"><A HREF="javascript:;">主板</A></TD>		<TD>567324</TD>		<TD>56321</TD>		<TD>09876</TD>		<TD>14523</TD>	</TR></TABLE><div id=canvas></div></BODY></HTML>

上一篇：CSS代码实现百分比柱状图

下一篇：返回列表