jschart 柱状图 饼状图 折线图

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