<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'testChart.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 需要引入两个js文件-->
<script type="text/javascript" src="<%=path%>/comm/jscharts.plug.mb.js"></script>
<script type="text/javascript" src="<%=path%>/comm/jscharts.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
<!--柱状图-->
var myData = new Array(); //定义二维数组
function drawBar(){
var colors=['#FFCC00','#FFFF00','#CCFF00','#FF0000'];//可为柱状图分配颜色
myData.splice(0,myData.length);
myData.push(['暴露垃圾',100]);myData.push(['新增建筑',200]);myData.push(['夜市排档',120]);
myData.push(['小广告',50]);
var myBarChart = new JSChart('bar', 'bar');//obj显示在什么地方, bar 显示什么图形
myBarChart.setTitle('*****柱*状*图*显*示*****');
myBarChart.setAxisNameX('案件类型');
myBarChart.setAxisNameY('案件数');
myBarChart.setSize(848,480);
myBarChart.setAxisNameColor("#000000");
myBarChart.setBarSpacingRatio(50);
myBarChart.resize(480,400);
myBarChart.setDataArray(myData);
myBarChart.colorizeBars(colors);
myBarChart.setAxisValuesAngle(25);//设置x轴字的横竖,区间太多容易显示
myBarChart.setAxisPaddingBottom(80);
//myBarChart.colorizeBars(colors);
myBarChart.set3D(true);
myBarChart.draw();
$("map").children().remove();//去掉背景图片
}
//饼状图
function drawPie(){
var colors=['#FFCC00','#FFFF00','#CCFF00','#FF0000'];
myData.splice(0,myData.length);
myData.push(['暴露垃圾',100]);myData.push(['新增建筑',200]);myData.push(['夜市排档',120]);
myData.push(['小广告',50]);
var myPieChart = new JSChart('pie', 'pie');
myPieChart.setTitle('*****饼*状*图*显*示*****');
myPieChart.setDataArray(myData);
myPieChart.colorizePie(colors);
myPieChart.setSize(600, 300);
myPieChart.setPieRadius(200);
myPieChart.setPieValuesColor('#000000');
myPieChart.setPieValuesFontSize(9);
myPieChart.setPiePosition(280, 165);
myPieChart.setPieAngle(60);
myPieChart.set3D(true);
myPieChart.draw();
}
//折线图
function drawLine(){
myData.splice(0,myData.length);
myData.push(['暴露垃圾',100]);myData.push(['新增建筑',200]);myData.push(['夜市排档',120]);
myData.push(['小广告',50]);
var myLineChart = new JSChart('line','line');
myLineChart.setTitle('*****折*线*图*显*示*****');
myLineChart.setAxisNameX('时间');
myLineChart.setAxisNameY('案件数');
//for(var i=0;i<=data[str.caseType].length;i++){
//var las = "案件数:"+myData[i][1];
myLineChart.setTooltip([1,200]);
myLineChart.setTooltip([2,120]);
myLineChart.setTooltip([3,50]);
//}
myLineChart.setTooltipPadding('3px');
myLineChart.setGraphExtend(true);
myLineChart.setDataArray(myData);
myLineChart.setSize(848,480);
myLineChart.draw();
}
//折线图
function test(){
var myData = new Array(['a', 2], ['b', 0], ['c', 3], ['d', 6], ['e', 8.5], ['f', 10], ['g', 9], ['h', 8], ['i', 5], ['j', 6], ['', 2.5]);
var myChart = new JSChart('graph','line');
myChart.setDataArray(myData);
myChart.setAxisNameFontSize(10);
myChart.setAxisNameX('Horizontal axis values');
myChart.setAxisNameY('Vertical axis');
myChart.setAxisNameColor('#787878');
myChart.setAxisValuesNumberX(6);
myChart.setAxisValuesNumberY(5);
myChart.setAxisValuesColor('#38a4d9');
myChart.setAxisColor('#38a4d9');
myChart.setLineColor('#C71112');
myChart.setTitle('price trend');
myChart.setTitleColor('#383838');
myChart.setGraphExtend(true);
myChart.setGridColor('#38a4d9');
myChart.setSize(616, 321);
myChart.setAxisPaddingLeft(140);
myChart.setAxisPaddingRight(140);
myChart.setAxisPaddingTop(60);
myChart.setAxisPaddingBottom(45);
myChart.setTextPaddingLeft(105);
myChart.setTextPaddingBottom(12);
// myChart.setBackgroundImage('chart_bg.jpg');
myChart.draw();
}
</script>
</head>
<body>
<input type='button' value='测试1' οnclick="drawBar()">
<input type='button' value='测试2' οnclick="drawPie()">
<input type='button' value='测试3' οnclick="drawLine()">
<input type='button' value='测试4' οnclick="test()">
<div id='bar'>
</div>
<div id='pie'>
</div>
<div id='line'>
</div>
<div id='graph'>
</div>
</body>
</html>