javascript chart
1.柱形图
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %>
<!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></title>
<script type="text/javascript" language="javascript">
function Reset()
{
document.getElementById("p1").style.height="100%";
document.getElementById("p1").innerText="100%";
}
function CreateChart()
{
var strArray=new Array();
strArray.push('<ul class=\"chart\">');
strArray.push('<li><p class=\"title\">A</p>');
strArray.push('<div class=\"total\">');
strArray.push('<p id=\"p1\" class="percent\" style=\"height:50%;\">50%</p>');
strArray.push('</div></li>');
strArray.push('</li>');
strArray.push('</ul>');
document.getElementById("chart").innerHTML=strArray.join('');
//document.getElementById("Button3").onclick();
}
</script>
<style type="text/css">
ul.chart{padding:0;margin:0;list-style:none;border:1px #ccc solid;height:255px;font-size:9pt;background:#ddf3ff}
ul.chart p{padding:0;margin:0}
ul.chart .title{text-align:center;height:25px;line-height:25px;}
ul.chart li{width:80px;float:left;padding:0;}
ul.chart li:hover{background:#f7f7f7;}
ul.chart .total{height:230px;position:relative;}
ul.chart .percent{float:left;background:#f0f;width:20px;margin:0 5px;text-align:right;position:absolute;left:25px;bottom:0;}--%>
</style>
</head>
<body>
<form id="form1" runat="server">
.
<ul class="chart">
<li><p class="title">A</p><div class="total"><p id="p1" class="percent" style="height:50%;">50%</p></div></li>
<li><p class="title">B</p><div class="total"><p class="percent" style="height:100%;">100%</p></div></li>
<li><p class="title">C</p><div class="total"><p class="percent" style="height:70%;">70%</p></div></li>
</ul>
<input id="Button1" type="button" onclick="Reset()" value="Show" />
<input id="Button2" type="button" onclick="CreateChart()" value="create" />
<div id="chart"></div>
</form>
</body>
</html>
Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %>
<!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></title>
<script type="text/javascript" language="javascript">
function Reset()
{
document.getElementById("p1").style.height="100%";
document.getElementById("p1").innerText="100%";
}
function CreateChart()
{
var strArray=new Array();
strArray.push('<ul class=\"chart\">');
strArray.push('<li><p class=\"title\">A</p>');
strArray.push('<div class=\"total\">');
strArray.push('<p id=\"p1\" class="percent\" style=\"height:50%;\">50%</p>');
strArray.push('</div></li>');
strArray.push('</li>');
strArray.push('</ul>');
document.getElementById("chart").innerHTML=strArray.join('');
//document.getElementById("Button3").onclick();
}
</script>
<style type="text/css">
ul.chart{padding:0;margin:0;list-style:none;border:1px #ccc solid;height:255px;font-size:9pt;background:#ddf3ff}
ul.chart p{padding:0;margin:0}
ul.chart .title{text-align:center;height:25px;line-height:25px;}
ul.chart li{width:80px;float:left;padding:0;}
ul.chart li:hover{background:#f7f7f7;}
ul.chart .total{height:230px;position:relative;}
ul.chart .percent{float:left;background:#f0f;width:20px;margin:0 5px;text-align:right;position:absolute;left:25px;bottom:0;}--%>
</style>
</head>
<body>
<form id="form1" runat="server">
.
<ul class="chart">
<li><p class="title">A</p><div class="total"><p id="p1" class="percent" style="height:50%;">50%</p></div></li>
<li><p class="title">B</p><div class="total"><p class="percent" style="height:100%;">100%</p></div></li>
<li><p class="title">C</p><div class="total"><p class="percent" style="height:70%;">70%</p></div></li>
</ul>
<input id="Button1" type="button" onclick="Reset()" value="Show" />
<input id="Button2" type="button" onclick="CreateChart()" value="create" />
<div id="chart"></div>
</form>
</body>
</html>
