9个答案 按时间排序 按投票排序
-
js实现条形统计图 /** 条形统计图容器 width:统计图宽度(>=100); height:统计图高度(>=450); left:统计图左边距; top:统计图上边距; title:统计图标题(默认值:统计图); unit:统计图单位(默认值:个); bgcolor:统计图背景颜色(默认值:#CCFFCC); divID:统计图层ID(默认值:div_chart) */ function chart(width,height,left,top,title,unit,bgcolor,divID){ this.width=(width<100||width>2000)?100:width this.height=(height<450||height>2000)?450:height this.left=left?((left<0||left>800)?0:left):0 this.top=top?((top<0||top>800)?0:top):0 this.title=title?title:"统计图" this.unit=unit?unit:"个" this.bgcolor=bgcolor?bgcolor:"#CCFFCC" this.divID=divID?divID:"div_chart" this.columns=new Array() this.columnCount=0 this.gradLeft=0 this.gradTop=this.top+20 this.gradHeight=this.height-120 this.gradInterval=(this.gradHeight)/11 this.maxValue=0 this.colWidth=25 this.colGap=this.colWidth } /** 给条形统计图加一条形,然后计算相应的值 */ function chart.prototype.addColumn(size,footnote,color){ var columnObj= new column(size,footnote,color) if(columnObj.size>this.maxValue){ this.maxValue=getBetterMaxValue(columnObj.size) } this.columns[this.columnCount++]=columnObj for(var i=0;i<this.columnCount;i++){ this.columns[i].height=((this.gradHeight)/11)*10*this.columns[i].size/this.maxValue } this.gradLeft=(this.width-(this.colWidth+this.colGap)*this.columnCount)/2 } /** 设置条形统计图中条形的宽度 */ function chart.prototype.setColWidth(colWidth){ this.colWidth=colWidth } /** 设置条形统计图中条形间的间隔 */ function chart.prototype.setColGap(colGap){ this.colGap=colGap } /** 显示条形统计图 */ function chart.prototype.show(){ if(document.getElementById(this.divID)) document.getElementById(this.divID).removeNode(true) var today=new Date() var strToday=today.getFullYear()+"年"+(today.getMonth()+1)+"月"+today.getDate()+"日" var strDivHTML="" strDivHTML="<DIV id='"+this.divID+"' style='POSITION:absolute;" strDivHTML+= "TOP:"+this.top+";LEFT:"+this.left+";width:"+this.width+";height:"+this.height strDivHTML+=";BACKGROUND-COLOR:"+this.bgcolor+";BORDER-TOP:3px RIDGE YELLOW;BORDER-RIGHT:3px RIDGE YELLOW;" strDivHTML+="BORDER-BOTTOM:3px RIDGE YELLOW;BORDER-LEFT:3px RIDGE YELLOW;Z-INDEX:0'>" strDivHTML+="<table align=center></tr><td><strong>"+this.title+"</strong></td></tr></table>" strDivHTML+="<table width=100%></tr><td style='FONT-SIZE: 12px;FONT-WEIGHT: bolder' align=left>单位:"+this.unit+"</td>" strDivHTML+="<td style='FONT-SIZE: 12px;' align=right>统计日期:"+strToday+"</td></tr></table></DIV>" document.body.insertAdjacentHTML("BeforeEnd",strDivHTML) showGrad(this) showColumns(this) } /** 条形统计图中的条形对象 size:条形的值(数字型); footnote:条形的脚注(字符串); color:条形的颜色(字符串) */ function column(size,footnote,color){ this.size=size this.footnote=footnote this.color=color this.height=0 } /** 显示条形统计图的标有刻度的坐标 */ function showGrad(chartObj){ var left=chartObj.gradLeft var top=chartObj.gradTop var height=(chartObj.gradHeight)/11 var color="red" var maxValue=chartObj.maxValue var arrowLeft=left+maxValue.toString().length*6 var lineHeight=2 var strHTML="<div style='POSITION:absolute;left:"+(arrowLeft-4)+";top:"+(top-14)+";color:"+color+";z-index:12'> "//纵坐标箭头 strHTML+="<span lang=EN-US style='font-size:18pt;font-family:VisualUI'>G</span></div>" strHTML+="<table style='POSITION:absolute;left:"+left+";top:"+top+";BORDER-RIGHT: "+color+" 4px solid;FONT-SIZE: 12px;z-index:11'>" for(var i=0;i<11;i++){ strHTML+="<tr><td id='td_grad_"+(i+1).toString()+"'" strHTML+="style='HEIGHT:"+height+"; BORDER-BOTTOM: "+color+" 1px solid; TEXT-ALIGN:right;vertical-align:bottom;'>" strHTML+=(maxValue/10*(10-i))+"</td></tr>" } strHTML+="</table>" var hLineTop=top+height*11+lineHeight*10 var hLineLeft=arrowLeft+7 var hLineWidth=(chartObj.colWidth+chartObj.colGap)*(chartObj.columnCount+1) strHTML+="<table style='POSITION:absolute;left:"+hLineLeft+";top:"+hLineTop+";width:"+hLineWidth+";BORDER-TOP: "+color+" 4px solid;'><tr><td></td></tr></table>" strHTML+="<div style='POSITION:absolute;left:"+(hLineLeft+hLineWidth-10)+";top:"+(hLineTop-10)+";color:"+color+";z-index:12'>"//横坐标箭头 strHTML+="<span lang=EN-US style='font-size:18pt;font-family:VisualUI'>E</span></div>" document.getElementById(chartObj.divID).insertAdjacentHTML("BeforeEnd",strHTML) } /** 显示条形统计图的所有条形 */ function showColumns(chartObj){ var arrowLeft=chartObj.gradLeft+chartObj.maxValue.toString().length*6 var left=arrowLeft+4+chartObj.colGap var colWidth=chartObj.colWidth var gap=chartObj.colGap var lineHeight=2//刻度线的高度 var strHTML="" for(var i=0;i<chartObj.columnCount;i++){ var colObj=chartObj.columns[i] var height=colObj.height+parseInt(colObj.size/(chartObj.maxValue/11))*lineHeight var colTop=chartObj.gradTop+chartObj.gradHeight+lineHeight*10-height height=height>1?height:1 strHTML+="<table><tr><td style='position:absolute;top:"+(colTop-15)+";left:"+(left+(colWidth+gap)*i)+";width:"+colWidth+";FONT-SIZE: 12px;word-wrap:break-word;z-index:1000' align='center'>"+colObj.size.toString()+"</td></tr></table>" strHTML+="<table><tr><td style='position:absolute;top:"+colTop+";left:"+(left+(colWidth+gap)*i)+";height:"+height+";width:"+colWidth+";background-color:"+colObj.color+"'></td></tr></table>" strHTML+="<table><tr><td style='position:absolute;top:"+(colTop+height+5)+";left:"+(left+(colWidth+gap)*i)+";width:"+colWidth+";FONT-SIZE: 12px;word-wrap:break-word;z-index:1000' align='center'>"+colObj.footnote+"</td></tr></table>" } document.getElementById(chartObj.divID).insertAdjacentHTML("BeforeEnd",strHTML) } /** 获得一个能被10整除的较佳最大数 */ function getBetterMaxValue(pMaxValue){ for(var i=10;i>1;i--) if(pMaxValue>=Math.pow(10,i))return parseInt(parseFloat(pMaxValue)/Math.pow(10,i)+1)*Math.pow(10,i) return parseInt(parseFloat(pMaxValue)/10+1)*10 } function document.ondragstart(){ return false } function document.onselectstart() { return false } function document.oncontextmenu(){ return false } ========================================================================================== 测试页面showChart.htm: <html> <head> <title>showChart</title> <script src="chart.js"></script> </head> <body> <script language="javascript"> var myChart=new chart(700,400,100,50,'测试统计图','万元'); myChart.setColWidth(30) myChart.addColumn(540,'李' ,'red') myChart.addColumn(530,'王','green') myChart.addColumn(640,'张','blue') myChart.addColumn(730,'刘','#cc3333') myChart.addColumn(40,'陈','#3333cc') myChart.show() </script> </body> </html>
试试我这个2012年3月10日 10:48
-
这个图表就是全用JS写的,觉得挺好用的
http://www.highcharts.com/
http://www.highcharts.com/demo/2012年3月10日 10:41
-
人家要是jquery写的呢?可定有办法啦,要是falsh就反编译,要是jquery肯定哪里写死了,细心点,肯定能找到解决方案。
2012年3月10日 10:17
相关推荐
求:线圈中的感应电动势。 解:∮E·dl = -∫(dB/dt)·dS = -ωΦcos(ωt) 其中,E 为电场强度,dl 为微小线元素,dB/dt 为磁场强度的变化率,dS 为微小面积元素。 例 4. 一根长为 L 的铜棒,在均匀磁场 B 中以...
它由一个空心线圈组成,当有电流通过被测导体时,产生的磁场会改变线圈内的磁通量,从而在线圈两端产生感应电压。罗氏线圈的特性在于其高精度和低漂移,使其在电力系统、电子设备检测以及科学研究中有着广泛的应用。...
标题中的“AD20画线圈的脚本.zip”指的是Altium Designer 20(AD20)的一个特定功能,即使用脚本来绘制电路板上的线圈或感应器。Altium Designer是一款强大的PCB设计软件,它允许用户通过编写自定义脚本来自动化复杂...
《一种实用线圈参数计算软件》是一款专为工程师和科研人员设计的专业软件,旨在简化线圈参数计算的过程,减轻计算工作...只需运行压缩包内的“一种实用线圈参数计算软件.exe”文件,即可开始便捷的线圈参数计算之旅。
Allegro线圈设计指导书 Allegro线圈设计指导书是一份详细的设计指导手册,旨在帮助设计师和工程师快速、准确地设计和优化线圈结构。该指导书涵盖了Coil Designer的基本使用模型、螺旋参数、一般设置、杂项设置等多...
空心线圈电感计算工具是一款专为电子工程师和爱好者设计的应用程序,它简化了空芯线圈电感值的计算过程。电感是电路设计中的一个重要参数,尤其是在电磁感应、滤波器设计以及射频电路中。空心线圈没有磁芯,其电感...
一体成型电感,是将电感线圈埋入金属粉末内的,所以线圈也影响电感,今天我们来谈谈影响电感线圈的因素。 1、必须注意电感线圈的使用环境 使用电感线圈应该充分考虑到其工作的环境,首先要注意产品所处环境的温度...
其主要特点是采用无铁心的线圈结构,避免了传统磁芯材料可能导致的饱和和磁滞效应,从而确保了传感器在宽动态范围内的线性性能。罗氏线圈由一个环绕非磁性材料骨架的环形线圈组成,通常用于测量交流电流,但也可应用...
在IT行业中,尤其是在电磁仿真领域,"helmholtzl三维线圈模型磁场"是一个重要的研究主题。亥姆霍兹线圈是由两个或多个相同尺寸、相距特定距离、且电流方向相反的线圈组成,其设计目的是产生一个尽可能均匀的磁场。在...
特斯拉线圈是一种高频率、高电压的变压器装置,由尼古拉·特斯拉在19世纪末发明,用于无线能量传输和研究电气现象。这个“魔氏特斯拉线圈计算器”是针对特斯拉线圈爱好者和研究人员设计的一款工具,由中国的科技创新...
线圈电感计算器是一款专为电子工程师和爱好者设计的实用工具,它可以帮助用户精确地计算出线圈的电感值。电感是电磁学中的一个关键参数,它描述了线圈在电流变化时储存和释放电磁能量的能力。下面将详细阐述线圈电感...
在电子工程和电磁学领域,计算两个线圈之间的互感是一项重要的任务,它涉及到能量传输、耦合效率以及电路设计等多个方面。本项目基于MATLAB软件,提供了计算两平行线圈(包括方形和圆形)互感的解决方案。下面将详细...
对于单匝线圈,当电流通过线圈中心时,线圈内的磁场线将形成一个环绕线圈的环状分布。线圈的形状、大小以及电流的大小都会影响磁场的强度和方向。 其次,两个平行放置的线圈之间会发生相互作用。如果它们通入同向...
罗氏线圈电流检测是一种非侵入式的电流测量方法,尤其在高精度和高频电流测量领域具有广泛应用。这种技术基于电磁感应原理,通过一个环绕在导体周围的无源线圈来探测通过导体的电流。罗氏线圈的名称来源于其发明者...
《矩形空心线圈与LC谐振计算详解》 在电子工程领域,矩形空心线圈是一种常见的元件,广泛应用于各种电路设计中,尤其是涉及到谐振电路时。本篇将详细介绍矩形空心线圈的计算方法以及LC谐振的基本原理和计算过程。 ...
1. **清洗**:去除线圈骨架和绝缘材料。 2. **称重**:将处理后的导线放在天平上称重,得到总的重量。 ##### 第三步:计算总匝数 利用第一步和第二步获得的数据,通过以下公式计算出线圈的总匝数: \[N = \frac{\...
电感线圈式车辆检测器线圈的施工规范是确保此类交通管理系统稳定高效运行的关键环节。这类检测器作为高精度的传感器,对线圈的参数要求严格,因此规范化的施工至关重要,不仅能保证系统的准确性和可靠性,还能降低...
1、电感量L电感量L表示线圈本身固有特性,与电流大小无关。除专门的电感线圈(色码电感)外,电感量一般不专门标注在线圈上,而以特定的名称标注。2、感抗XL电感线圈对交流电流阻碍作用的大小称感抗XL,单位是欧姆。...
### 线圈电感计算公式详解 #### 一、线圈电感的基本概念 线圈电感是指当电流通过线圈时,在线圈周围产生的磁场能力,它反映了线圈储存磁场能量的能力。电感的大小不仅与线圈本身的物理特性有关,还受到外部条件的...
一维亥姆霍兹线圈仿真,绕线区域由矩形生成,即长方体,更好的模拟了多匝线圈的情况。开发平台为comsol5.2