您当前的位置: 首页 » JavaScript/JQuery编程 » 封装js绘制曲线图类
封装js绘制曲线图类
论坛链接
最近开发彩票分析网站，需要用到js绘制分析曲线图。参考网上的绘图代码，自己封装了一个绘图类，给大家做一个参考。
引用方法:
new gov.Graphic(par1,par2,par3);
par1 为绘图数据
var data=new period([0,10,22,13,34,25,28,26,30,35,28,34,39,28,26,50,35,28,34,39,55],//y轴数据[188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,
204,205,206,207,208]//x轴数据
);
par2 为绘图的容器层id
par3 为绘图样式参数，可选参数
默认值：
{
height:170, //绘图区域高度
maxHeight:50, //y轴最高数值
barDistance:26, //x轴坐标间距
topDistance:0, //上部填充
bottomDistance:0, //底部填充
leftDistance:20, //左部填充
pointWidth:5, //坐标点宽度
pointHeight:5, //坐标点高度
pointColor:"#ff0000", //坐标点颜色
lineColor:"#ffd43a", //连接线颜色
valueWidth:20, //y轴数值宽度
valueColor:"#000", //y轴数值颜色
timeWidth:20, //x轴数值宽度
timeColor:"#000", //x轴数值颜色
disvalue:true, //是否显示y轴数值
distime:true //是否显示x轴数值
}
源代码下载：http://www.blueidea.com/articleimg/2009/03/6562/jsdemo.rar
演示：
引用方法:
new gov.Graphic(par1,par2,par3);
par1 为绘图数据
var data=new period([0,10,22,13,34,25,28,26,30,35,28,34,39,28,26,50,35,28,34,39,55],//y轴数据[188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,
204,205,206,207,208]//x轴数据
);
par2 为绘图的容器层id
par3 为绘图样式参数，可选参数
默认值：
{
height:170, //绘图区域高度
maxHeight:50, //y轴最高数值
barDistance:26, //x轴坐标间距
topDistance:0, //上部填充
bottomDistance:0, //底部填充
leftDistance:20, //左部填充
pointWidth:5, //坐标点宽度
pointHeight:5, //坐标点高度
pointColor:"#ff0000", //坐标点颜色
lineColor:"#ffd43a", //连接线颜色
valueWidth:20, //y轴数值宽度
valueColor:"#000", //y轴数值颜色
timeWidth:20, //x轴数值宽度
timeColor:"#000", //x轴数值颜色
disvalue:true, //是否显示y轴数值
distime:true //是否显示x轴数值
}
源代码下载：http://www.blueidea.com/articleimg/2009/03/6562/jsdemo.rar
演示：