`
zrmcsd
  • 浏览: 47212 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

JS 生成柱装图

阅读更多
js 代码
 
  1. <%@ page import="java.sql.*"%>  
  2. <%@ page import="java.util.*"%>   
  3.    
  4. <%     
  5.    
  6.     Database db = Service.getDatabase();  
  7.    
  8.     String SqlGz="select zjfl,count(*) as renshu,sum(jbgz) as jbgz,sum(fdgz) as fdgz,sum(gwgz) as gwgz,sum(gzjt) as gzjt   from gz_gzxx1 group by zjfl  ";  
  9.      
  10.     RecordSet rs = db.getRecordSet(SqlGz);  
  11.       
  12.     int  rc =rs.rowCount();  
  13.  %>  
  14.   
  15.  <html>  
  16.   
  17.   <head>  
  18.     <title>Chart Demo (using Canvas painter)</title>  
  19.     <script type="text/javascript" src="includes/excanvas.js"></script>  
  20.     <script type="text/javascript" src="includes/chart.js"></script>  
  21.     <script type="text/javascript" src="includes/canvaschartpainter.js"></script>  
  22.     <link rel="stylesheet" type="text/css" href="includes/canvaschart.css" />  
  23.    </head>  
  24.   
  25.   <body onLoad="demo();">  
  26.   
  27.    
  28.     <div id="chart"  class="chart" style="width: 1800px; height: 1000px;"></div>  
  29.     <script type="text/javascript">  
  30.         function draw() {  
  31.             var c = new Chart(document.getElementById('chart'));  
  32.                 c.setDefaultType(CHART_AREA | CHART_STACKED);  
  33.                 c.setGridDensity(33, 40);  
  34.                 c.setVerticalRange(-100, 600);  
  35.                 c.setHorizontalLabels(['基本', '浮动', '岗位', '工资津贴']);  
  36.                 c.setBarWidth(10);  
  37.                   
  38. <%  
  39.   
  40.    
  41. String colora[]={ "#4040FF","#8080FF","#FF8080"};  
  42.   
  43.     for (int row=1 ; row<=rc;row++)  
  44.     {     
  45. %>  
  46.       
  47.     c.add('<%=rs.getValue(row,"zjfl")%>',     '<%=colora[row-1]%>', [ <%=rs.getValue(row,"jbgz")%>,<%=rs.getValue(row,"fdgz")%>,    <%=rs.getValue(row,"gwgz") %>,<%=rs.getValue(row,"gzjt") %> ], CHART_LINE);  
  48.   
  49.       
  50. <%  
  51.     }  
  52. %>  
  53.         c.draw();  
  54.         }  
  55.           
  56.         window.onload = function() {  
  57.             draw();  
  58.         };  
  59.     </script>             
  60.     </body>  
  61. </html>   
  • 大小: 178.9 KB
分享到:
评论

相关推荐

    js按照数组生成柱状图

    在JavaScript编程中,生成...总的来说,使用JavaScript生成柱状图需要理解数据结构、DOM操作以及可能的图形库。通过灵活运用这些工具,我们可以创建出符合需求的、具有自定义特性的柱状图,从而更好地呈现和解释数据。

    asp生成柱状图无组件asp生成柱状图

    2. **JavaScript**:JavaScript是实现动态效果的核心,比如使用库如`Chart.js`或`Highcharts`来生成柱状图。首先,需要在HTML中引入这些库的CDN链接,然后编写JavaScript代码来定义数据、配置选项,并绘制图表。如果...

    生成柱状图实例代码Asp

    总结来说,ASP生成柱状图实例涉及ASP脚本语言、数据处理、JavaScript图形库的使用,以及数据和图形的交互。掌握这些技术,可以创建出强大的数据可视化工具,帮助用户更好地理解和解析复杂的数据集。

    asp生成柱状图代码 2.0

    对于不支持ASP.NET Chart控件的旧版本ASP,可以借助JavaScript库,如Highcharts、Chart.js或D3.js等在客户端生成柱状图。首先,在HTML中引入所需的库,接着编写JavaScript代码定义数据、配置选项,并创建图表实例。...

    JS生成多种图形(饼状图,柱状图,折线图,雷达图)

    总的来说,JavaScript生成图形的能力是现代Web开发的重要组成部分,它使得数据可视化变得更加便捷和高效。无论是用于仪表板、报告还是交互式应用,了解如何使用JS创建饼状图、柱状图、折线图和雷达图都将极大地提升...

    Asp生成柱状图实例代码

    在Asp(Active Server Pages)开发中,生成柱状图是一项常见的需求,特别是在数据分析和可视化展示的场景下。柱状图能直观地呈现数据的差异和趋势,使得用户可以快速理解数据信息。以下是对Asp生成柱状图实例源码的...

    JSP调用JavaBean在网页上动态生成柱状图

    根据给定的文件信息,我们可以深入探讨如何使用JSP(JavaServer Pages)调用JavaBean在网页上动态生成柱状图。此技术在早期的Web开发中非常流行,尤其是在使用Java进行后端处理的场景下。 ### JSP与JavaBean协同...

    生成柱状图

    **生成柱状图** 在数据分析和可视化领域,柱状图是一种广泛应用的图表类型,它能够清晰地比较不同类别的数值。FusionCharts V3 是一个强大的JavaScript图表库,专门用于创建交互式、丰富的数据可视化图表,包括2D和...

    java 生成柱状图 myeclipse完整项目实例

    Java 生成柱状图是数据可视化的一个常见需求,特别是在数据分析和报表展示中。在这个MyEclipse完整项目实例中,我们主要关注的是如何使用Java和JFreeChart库来创建柱状图。JFreeChart是一个强大的开源Java图表库,它...

    纯js+css写的柱状图

    在这里,每个柱子就是由一个`div`元素表示,通过JS动态生成并设置其高度和宽度,以及CSS进行样式装饰,从而模拟出柱状图的效果。 为了使用这个组件,开发者需要做以下几步: 1. 在HTML文件中引入编写好的JS和CSS...

    js chart js柱状图

    2. **数据结构**: 为了生成柱状图,你需要将数据组织成合适的格式,通常是一个数组或对象集合,其中包含了每个柱子的高度或宽度以及对应的类别名称。 3. **JavaScript基础**: 对JavaScript的基本理解是必不可少的,...

    javascript柱状图参考资料

    本文将深入解析如何使用JavaScript生成柱状图,并通过给定文件的部分内容进行具体分析。 #### 一、柱状图的基本概念 柱状图是一种用于显示不同类别数据量大小的图表类型,通过垂直或水平的条形长度来表示数值大小...

    ASP生成柱状图

    在ASP中生成柱状图是一项常见的需求,这通常涉及到数据可视化,可以帮助用户更好地理解和解析数据。以下将详细介绍如何使用ASP来实现柱状图的生成。 首先,我们需要一个数据源。柱状图的数据通常是结构化的,比如...

    asp生成漂亮柱状图实例

    解压并查看这个文件,你会看到ASP代码如何处理数据、创建HTML结构,以及可能包含的CSS和JavaScript代码,这些都是生成柱状图的关键部分。 总的来说,ASP生成漂亮柱状图实例是一个结合了服务器端脚本、HTML、CSS和...

    asp生成柱状图代码

    在ASP中生成柱状图通常涉及到数据可视化的过程,这通常由JavaScript库、图表插件或者服务器端组件来实现。这里我们将探讨如何使用ASP结合前端技术来生成柱状图。 1. **基础概念** - ASP:它允许开发者使用HTML、...

    Asp生成柱状图实例代码.rar

    客户端的JavaScript代码负责接收服务器返回的数据,并根据数据生成柱状图。服务器端ASP代码可能涉及以下步骤: 1. 连接数据库,执行SQL查询以获取数据。 2. 将数据组织成适合绘制柱状图的格式,比如数组或JSON对象...

    ASP实例开发源码-生成柱状图实例代码.zip

    这通常涉及到创建HTML元素,如canvas标签,然后通过JavaScript库的方法生成柱状图。 5. 结果渲染:最后,用户浏览器接收到服务器生成的HTML和JavaScript代码,执行JavaScript代码,动态地在页面上渲染出柱状图。 ...

    源代码-生成柱状图实例代码.zip

    【标题】"源代码-生成柱状图实例代码.zip" 提供的是一个使用ASP(Active Server Pages)技术生成柱状图的源代码示例。在ASP中,我们通常利用服务器端脚本语言如VBScript或JScript来动态生成网页内容。在本案例中,这...

    js图形报表,柱状图,饼状图

    总结起来,利用JavaScript生成柱状图和饼状图报表,需要掌握相关图表库的使用,理解基本的配置项设置,并注重图表的美观性和交互性。通过熟练运用这些技术,可以创建出既实用又吸引人的数据可视化工具。

    ASP源码—生成柱状图实例代码.zip

    在ASP中生成柱状图通常需要借助图形库或第三方组件,例如JScript图表库、Chart.js、Google Charts等。这个实例可能是利用服务器端脚本将数据转换为图形,然后返回给客户端浏览器显示。 以下是可能涉及的关键知识点...

Global site tag (gtag.js) - Google Analytics