javascript chart

最新推荐文章于 2024-01-18 09:38:29 发布

weixin_30279751

最新推荐文章于 2024-01-18 09:38:29 发布

阅读量110

点赞数

文章标签： javascript xhtml c# ViewUI

原文链接：http://www.cnblogs.com/ike_li/archive/2009/09/25/1574068.html

版权

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>

转载于:https://www.cnblogs.com/ike_li/archive/2009/09/25/1574068.html