java画曲线图 数组_javascript 在客户端绘制图表系列三——xy坐标曲线图(l转)

这篇博客展示了如何使用JavaScript的wz_jsgraphics.js库在客户端绘制XY坐标曲线图,通过数组数据动态生成图表。作者指出,这种方法可以减轻服务器压力,但可能会使客户端变得庞大,代码基于div的点阵字原理,效率不高。文章还讨论了数组排序的问题,并提供了避免原始数组被修改的方法。
摘要由CSDN通过智能技术生成

4f1150b881333f12a311ae9ef34da474.png 2 4f1150b881333f12a311ae9ef34da474.png< html xmlns ="http://www.w3.org/1999/xhtml" > 3 4f1150b881333f12a311ae9ef34da474.png< head > 4 4f1150b881333f12a311ae9ef34da474.png< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> 5 4f1150b881333f12a311ae9ef34da474.png< title > TEST title > 6 4f1150b881333f12a311ae9ef34da474.png< script type ="text/javascript" src ="wz_jsgraphics.js" > script > 7 4f1150b881333f12a311ae9ef34da474.png< script type ="text/javascript" src ="line.js" > script > 8 4f1150b881333f12a311ae9ef34da474.png head > 9 4f1150b881333f12a311ae9ef34da474.png< body > 10 4f1150b881333f12a311ae9ef34da474.png< p > 1.线图 p > 11 4f1150b881333f12a311ae9ef34da474.png< div id ="LineDiv" style ="position:relative;height:200px;width:300px;" > div > 12 1fa987a29c6482f53d401256f96355eb.png

ca75c07623e1b494fee67e8f316fc310.gif< script language ="javascript" > 9b8a8a44dd1c74ae49c20a7cd451974e.png13 d18c02628675d0a2c816449d98bda930.png var y = new Array ();14 d18c02628675d0a2c816449d98bda930.png     y[ 0 ] = 16000 ;15 d18c02628675d0a2c816449d98bda930.png     y[ 1 ] = 1000 ;16 d18c02628675d0a2c816449d98bda930.png     y[ 2 ] = 20000 ;17 d18c02628675d0a2c816449d98bda930.png         y[ 3 ] = 100 ;18 d18c02628675d0a2c816449d98bda930.png     y[ 4 ] = - 500 ;19 d18c02628675d0a2c816449d98bda930.png     y[ 5 ] = 9000 ;20 d18c02628675d0a2c816449d98bda930.png var x = new Array ();21 d18c02628675d0a2c816449d98bda930.png    x[ 0 ] = " a " ;22 d18c02628675d0a2c816449d98bda930.png    x[ 1 ] = " b " ;23 d18c02628675d0a2c816449d98bda930.png    x[ 2 ] = " c " ;24 d18c02628675d0a2c816449d98bda930.png     x[ 3 ] = " aa " ;25 d18c02628675d0a2c816449d98bda930.png     x[ 4 ] = " bb " ;26 d18c02628675d0a2c816449d98bda930.png     x[ 5 ] = " dd " ;27 d18c02628675d0a2c816449d98bda930.png var myline = new Line( " LineDiv " );28 d18c02628675d0a2c816449d98bda930.png    myline.drawXYLine(y,x);29 8f1ba5b45633e9678d1db480c16cae3f.png // myline.clearLine(); 30 4f1150b881333f12a311ae9ef34da474.png script > 31 4f1150b881333f12a311ae9ef34da474.png body > 32 4f1150b881333f12a311ae9ef34da474.png html >

效果图:

c930916b11049c433b06521532aebf63.png

1

1fa987a29c6482f53d401256f96355eb.png

ca75c07623e1b494fee67e8f316fc310.gif /**/ /* ************更多技术文章请访问:http://www.blogjava.net/JAVA-HE****************2 d18c02628675d0a2c816449d98bda930.png *3

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值