您的位置：首页 > Web前端 > JavaScript

jschart 柱状图饼状图折线图

2014-01-21 16:20 239 查看

<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">



<script type="text/javascript" src="<%=path%>/comm/jscharts.plug.mb.js"></script>

<script type="text/javascript" src="<%=path%>/comm/jscharts.js"></script>



<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' onclick="drawBar()">

<input type='button' value='测试2' onclick="drawPie()">

<input type='button' value='测试3' onclick="drawLine()">

<input type='button' value='测试4' onclick="test()">

<div id='bar'>

</div>

<div id='pie'>

</div>

<div id='line'>

</div>

<div id='graph'>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

jschart 柱状图 饼状图 折线图

jschart 柱状图饼状图折线图