最近要实现一个进、销、存图表，在网上狂搜了一下，几乎找不到相应的图表组件，没办法只好自己动手写了，下面分享出来，如下图：
下面说一下实现步骤：
1、下载：wz_jsgraphics.js；
2、下载jquery：jquery-1.7.2.min.js，支持所有jquery版本；
3、接下来就是实现思路的问题了，主要有以下几步：
第一步：画上刻度；
第二步：画BAR图；分左边和右边的，左边的先画，右边的分两种情况，第一种是小的，第二种是BAR接在一起的；
第三步：画LENGEND
第四步：画下刻度；
4、下面把源码复制上来：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="./wz_jsgraphics/wz_jsgraphics.js"></script>
<script src="./jquery-1.7.2.min.js"></script>
</head>
<body>
<div align="center" style="position:relative;height:30px;width:640px;font-weight:bold;">全公司月度进销存平衡图</div>
<div id="essCanvas" style="position:relative;left:50px;height:300px;width:640px;border:0px solid pink;"></div>
<div align="center" style="position:relative;height:30px;width:640px;font-weight:bold;">全公司月度进销存平衡图</div>
<div id="essCanvas2" style="position:relative;left:50px;height:300px;width:640px;border:0px solid pink;"></div>
<script type="text/javascript">
<!--
/**
*画进、销、存图表
*/
function ESSCanvas(essCanvas){
this.essCanvasWidth = parseInt($("#"+essCanvas).css("width"));//获取画布div的宽度
this.essCanvasHeight = parseInt($("#"+essCanvas).css("height"));//获取画布div的高度
t
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
