?? 統(tǒng)計圖.htm
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript" src="js/wz_jsgraphics.js"></script>
<TITLE>js統(tǒng)計圖</TITLE>
<style type="text/css">
<!--
.style1 {
font-size: 100px;
color: #FF0000;
}
-->
</style></HEAD>
<BODY>
<div id="myCanvas" style="position:relative;height:0px;width:100%;">
<script>
var jg = new jsGraphics("myCanvas");
function myDrawFunction()
{
//先畫坐標(biāo)
jg.setColor( "#FF0000" ); //設(shè)置坐標(biāo)線顏色
jg.setStroke(2);//指定畫筆厚度
jg.drawLine(100,500,800,500);//畫線X坐標(biāo)
jg.drawLine(780,490,800,500);
jg.drawLine(780,510,800,500);
jg.drawLine(100,500,100,50);//畫線Y坐標(biāo)
jg.drawLine(90,70,100,50);
jg.drawLine(110,70,100,50);
jg.drawString( "X坐標(biāo)", 800, 500 );
jg.drawString( "Y坐標(biāo)", 60, 50 );
//畫刻度
jg.setColor( "#9900FF" ); //設(shè)置坐標(biāo)刻度線顏色
for(var i = 0 ; i <= 20 ; i++){//畫X坐標(biāo)刻度
jg.drawLine(130+22*i,500,125+22*i,510);
jg.drawString( "刻<br>度<br>"+i, 120+22*i, 512 );
}
for(var i = 0 ; i <= 18 ; i++){//畫Y坐標(biāo)刻度
jg.drawLine(100,460-i*20,90,470-i*20);
jg.drawString( "刻度"+i, 45, 470-i*20);
}
//在坐標(biāo)中畫對應(yīng)的條形圖
jg.setStroke(3);//指定畫筆厚度
jg.setColor( "#00CCFF" ); //設(shè)置條形邊框顏色
jg.drawRect(130,200,20,300);//畫條形邊框
jg.setColor( "#0066FF" ); //設(shè)置條形填充顏色
jg.fillRect(133,203,17,297); //填充條形
jg.setColor( "#00FFCC" ); //設(shè)置條形邊框顏色
jg.drawRect(153,250,20,250);//畫條形邊框
jg.setColor( "#00CCFF" ); //設(shè)置條形填充顏色
jg.fillRect(156,253,17,247); //填充條形
jg.setColor( "#00FFCC" ); //設(shè)置條形邊框顏色
jg.drawRect(173,220,20,280);//畫條形邊框
jg.setColor( "#FF00FF" ); //設(shè)置條形填充顏色
jg.fillRect(176,223,17,277); //填充條形
jg.setColor( "#00CCFF" ); //設(shè)置條形邊框顏色
jg.drawRect(193,400,20,100);//畫條形邊框
jg.setColor( "#00FFCC" ); //設(shè)置條形填充顏色
jg.fillRect(196,403,17,97); //填充條形
jg.setColor( "#00FFCC" ); //設(shè)置條形邊框顏色
jg.drawRect(213,250,20,250);//畫條形邊框
jg.setColor( "#00CCFF" ); //設(shè)置條形填充顏色
jg.fillRect(216,253,17,247); //填充條形
jg.setColor( "#00FFCC" ); //設(shè)置條形邊框顏色
jg.drawRect(233,220,20,280);//畫條形邊框
jg.setColor( "#FF00FF" ); //設(shè)置條形填充顏色
jg.fillRect(236,223,17,277); //填充條形
jg.setColor( "#00CCFF" ); //設(shè)置條形邊框顏色
jg.drawRect(250,200,20,300);//畫條形邊框
jg.setColor( "#0066FF" ); //設(shè)置條形填充顏色
jg.fillRect(253,203,17,297); //填充條形
jg.setColor( "#00FFCC" ); //設(shè)置條形邊框顏色
jg.drawRect(273,250,20,250);//畫條形邊框
jg.setColor( "#00CCFF" ); //設(shè)置條形填充顏色
jg.fillRect(276,253,17,247); //填充條形
jg.setColor( "#00FFCC" ); //設(shè)置條形邊框顏色
jg.drawRect(293,220,20,280);//畫條形邊框
jg.setColor( "#FF00FF" ); //設(shè)置條形填充顏色
jg.fillRect(296,223,17,277); //填充條形
jg.setColor( "#00CCFF" ); //設(shè)置條形邊框顏色
jg.drawRect(313,400,20,100);//畫條形邊框
jg.setColor( "#00FFCC" ); //設(shè)置條形填充顏色
jg.fillRect(316,403,17,97); //填充條形
jg.setColor( "#00FFCC" ); //設(shè)置條形邊框顏色
jg.drawRect(333,250,20,250);//畫條形邊框
jg.setColor( "#00CCFF" ); //設(shè)置條形填充顏色
jg.fillRect(336,253,17,247); //填充條形
jg.setColor( "#00FFCC" ); //設(shè)置條形邊框顏色
jg.drawRect(353,220,20,280);//畫條形邊框
jg.setColor( "#FF00FF" ); //設(shè)置條形填充顏色
jg.fillRect(356,223,17,277); //填充條形
jg.setColor( "#00CCFF" ); //設(shè)置條形邊框顏色
jg.drawRect(370,200,20,300);//畫條形邊框
jg.setColor( "#0066FF" ); //設(shè)置條形填充顏色
jg.fillRect(373,203,17,297); //填充條形
jg.setColor( "#00FFCC" ); //設(shè)置條形邊框顏色
jg.drawRect(393,250,20,250);//畫條形邊框
jg.setColor( "#00CCFF" ); //設(shè)置條形填充顏色
jg.fillRect(396,253,17,247); //填充條形
jg.setColor( "#00FFCC" ); //設(shè)置條形邊框顏色
jg.drawRect(413,220,20,280);//畫條形邊框
jg.setColor( "#FF00FF" ); //設(shè)置條形填充顏色
jg.fillRect(416,223,17,277); //填充條形
//畫餅圖
jg.setColor("#999999");
jg.fillOval(610, 150, 120, 80);
jg.setColor("#ff8080");
jg.fillArc(610, 140, 120, 80, 330, 40);
jg.setColor("#8080ff");
jg.fillArc(610, 140, 120, 80, 40, 140);
jg.setColor("#ff80ff");
jg.fillArc(610, 140, 120, 80, 140, 180);
jg.setColor("#80bb80");
jg.fillArc(610, 140, 120, 80, 180, 280);
jg.setColor("#ffcc66");
jg.fillArc(610, 140, 120, 80, 280, 330);
//畫指示線
jg.setColor("#FF0000");
jg.drawLine(680,160,700,100);
jg.drawString( "注釋1", 705, 95 );
jg.drawLine(690,200,750,250);
jg.drawString( "注釋2", 755, 245 );
jg.paint();//輸出條形圖
}
myDrawFunction()
</script>
</div>
<div align="center"><span class="style1">js統(tǒng)計圖</span></div>
</BODY>
</HTML>
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -