jschart 柱状图饼状图折线图

最新推荐文章于 2024-08-08 06:02:59 发布

zyb_java

最新推荐文章于 2024-08-08 06:02:59 发布

阅读量2.5k

点赞数

分类专栏： javascript 文章标签： jschart 柱状图饼状图折线图报表

本文链接：https://blog.csdn.net/zyb_java/article/details/18614593

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

zyb_java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jschart 柱状图饼状图折线图

"> My JSP 'testChart.jsp' starting page /comm/jscharts.plug.mb.js"> /comm/jscharts.js"> --> var myData = new Array(); //定义二维数组 function
复制链接

扫一扫