📄 统计图.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统计图</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()
{
//先画坐标
jg.setColor( "#FF0000" ); //设置坐标线颜色
jg.setStroke(2);//指定画笔厚度
jg.drawLine(100,500,800,500);//画线X坐标
jg.drawLine(780,490,800,500);
jg.drawLine(780,510,800,500);
jg.drawLine(100,500,100,50);//画线Y坐标
jg.drawLine(90,70,100,50);
jg.drawLine(110,70,100,50);
jg.drawString( "X坐标", 800, 500 );
jg.drawString( "Y坐标", 60, 50 );
//画刻度
jg.setColor( "#9900FF" ); //设置坐标刻度线颜色
for(var i = 0 ; i <= 20 ; i++){//画X坐标刻度
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坐标刻度
jg.drawLine(100,460-i*20,90,470-i*20);
jg.drawString( "刻度"+i, 45, 470-i*20);
}
//在坐标中画对应的条形图
jg.setStroke(3);//指定画笔厚度
jg.setColor( "#00CCFF" ); //设置条形边框颜色
jg.drawRect(130,200,20,300);//画条形边框
jg.setColor( "#0066FF" ); //设置条形填充颜色
jg.fillRect(133,203,17,297); //填充条形
jg.setColor( "#00FFCC" ); //设置条形边框颜色
jg.drawRect(153,250,20,250);//画条形边框
jg.setColor( "#00CCFF" ); //设置条形填充颜色
jg.fillRect(156,253,17,247); //填充条形
jg.setColor( "#00FFCC" ); //设置条形边框颜色
jg.drawRect(173,220,20,280);//画条形边框
jg.setColor( "#FF00FF" ); //设置条形填充颜色
jg.fillRect(176,223,17,277); //填充条形
jg.setColor( "#00CCFF" ); //设置条形边框颜色
jg.drawRect(193,400,20,100);//画条形边框
jg.setColor( "#00FFCC" ); //设置条形填充颜色
jg.fillRect(196,403,17,97); //填充条形
jg.setColor( "#00FFCC" ); //设置条形边框颜色
jg.drawRect(213,250,20,250);//画条形边框
jg.setColor( "#00CCFF" ); //设置条形填充颜色
jg.fillRect(216,253,17,247); //填充条形
jg.setColor( "#00FFCC" ); //设置条形边框颜色
jg.drawRect(233,220,20,280);//画条形边框
jg.setColor( "#FF00FF" ); //设置条形填充颜色
jg.fillRect(236,223,17,277); //填充条形
jg.setColor( "#00CCFF" ); //设置条形边框颜色
jg.drawRect(250,200,20,300);//画条形边框
jg.setColor( "#0066FF" ); //设置条形填充颜色
jg.fillRect(253,203,17,297); //填充条形
jg.setColor( "#00FFCC" ); //设置条形边框颜色
jg.drawRect(273,250,20,250);//画条形边框
jg.setColor( "#00CCFF" ); //设置条形填充颜色
jg.fillRect(276,253,17,247); //填充条形
jg.setColor( "#00FFCC" ); //设置条形边框颜色
jg.drawRect(293,220,20,280);//画条形边框
jg.setColor( "#FF00FF" ); //设置条形填充颜色
jg.fillRect(296,223,17,277); //填充条形
jg.setColor( "#00CCFF" ); //设置条形边框颜色
jg.drawRect(313,400,20,100);//画条形边框
jg.setColor( "#00FFCC" ); //设置条形填充颜色
jg.fillRect(316,403,17,97); //填充条形
jg.setColor( "#00FFCC" ); //设置条形边框颜色
jg.drawRect(333,250,20,250);//画条形边框
jg.setColor( "#00CCFF" ); //设置条形填充颜色
jg.fillRect(336,253,17,247); //填充条形
jg.setColor( "#00FFCC" ); //设置条形边框颜色
jg.drawRect(353,220,20,280);//画条形边框
jg.setColor( "#FF00FF" ); //设置条形填充颜色
jg.fillRect(356,223,17,277); //填充条形
jg.setColor( "#00CCFF" ); //设置条形边框颜色
jg.drawRect(370,200,20,300);//画条形边框
jg.setColor( "#0066FF" ); //设置条形填充颜色
jg.fillRect(373,203,17,297); //填充条形
jg.setColor( "#00FFCC" ); //设置条形边框颜色
jg.drawRect(393,250,20,250);//画条形边框
jg.setColor( "#00CCFF" ); //设置条形填充颜色
jg.fillRect(396,253,17,247); //填充条形
jg.setColor( "#00FFCC" ); //设置条形边框颜色
jg.drawRect(413,220,20,280);//画条形边框
jg.setColor( "#FF00FF" ); //设置条形填充颜色
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统计图</span></div>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -