使用JS绘制数据库统计图表-优快云博客

js 代码

<%@ page import="java.sql.*"%>
<%@ page import="java.util.*"%>
<%
Database db = Service.getDatabase();
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 ";
RecordSet rs = db.getRecordSet(SqlGz);
int rc =rs.rowCount();
%>
<html>
<head>
<title>Chart Demo (using Canvas painter)</title>
<script type="text/javascript" src="includes/excanvas.js"></script>
<script type="text/javascript" src="includes/chart.js"></script>
<script type="text/javascript" src="includes/canvaschartpainter.js"></script>
<link rel="stylesheet" type="text/css" href="includes/canvaschart.css" />
</head>
<body onLoad="demo();">
<div id="chart" class="chart" style="width: 1800px; height: 1000px;"></div>
<script type="text/javascript">
function draw() {
var c = new Chart(document.getElementById('chart'));
c.setDefaultType(CHART_AREA | CHART_STACKED);
c.setGridDensity(33, 40);
c.setVerticalRange(-100, 600);
c.setHorizontalLabels(['基本', '浮动', '岗位', '工资津贴']);
c.setBarWidth(10);
<%
String colora[]={ "#4040FF","#8080FF","#FF8080"};
for (int row=1 ; row<=rc;row++)
{
%>
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);
<%
}
%>
c.draw();
}
window.onload = function() {
draw();
};
</script>
</body>
</html>

JS 生成柱装图