简单的柱状图

最新推荐文章于 2023-12-15 13:23:08 发布

菜鸟面条

最新推荐文章于 2023-12-15 13:23:08 发布

阅读量628

点赞数

分类专栏：前台文章标签： jqplot 柱状图

前台专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>柱状图</title>
<link rel="stylesheet" type="text/css" hrf="jqplotjs/jquery.jqplot.css" />
<script class="include" type="text/javascript" src="jqplotjs/jquery.min.js"></script>
<script class="include" type="text/javascript" src="jqplotjs/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplotjs/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="jqplotjs/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="jqplotjs/plugins/jqplot.pointLabels.min.js"></script>
</head>
<body>
	<div id="chart"></div>
<script type="text/javascript"> 
function drawHistogram(type, arrayKey, arrayValue) {  
    $.jqplot.config.enablePlugins = true;  
    line = arrayValue;  
    plot = $.jqplot('chart', [ line ], {  
        title : type,  
        seriesDefaults: {
	    	  renderer: $.jqplot.BarRenderer,
	          rendererOptions:{barMargin:50, //设置柱状图之间的空隙，如果想要自动的设置柱状图之间的空隙和大小就去掉
	        	  barWidth:25},   //设置柱状图的宽度
	          pointLabels:{show:true, stackedValue: true, //目的在于显示柱状图上的数据
	          formatString : '%.2f'}  //设置数据显示的样式
	          },
        /*
        series : [ {  
            renderer : $.jqplot.BarRenderer,  
            //color : 'blue',   // 设置柱状图的眼神颜色
            rendererOptions : {  
            //    barDirection : 'horizontal',  
                //the interval of two bars  
                barMargin : 15,  
                //the width of each bar  
                barWidth : 22  
            }  
        } ],  
        */
        axesDefaults: {
	        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
	        tickOptions: {
	          angle: -30,
	          fontSize: '10pt'
	        }
	    },
	    /*
	     axes : {
            xaxis : {  
                tickInterval : '1',  
                renderer : $.jqplot.LinearAxisRenderer  
            },  
            yaxis : {  
                renderer : $.jqplot.CategoryAxisRenderer,  
                ticks : arrayKey  
            }  
        }
	    */
	    axes: {
		      xaxis: {
		    	  show: false,    //是否自动显示坐标轴
		    	  renderer: $.jqplot.CategoryAxisRenderer, //这句话是必须的。
		    	  showTicks: true,        // 是否显示刻度线以及坐标轴上的刻度值  
		    	  showTickMarks: true,    //设置是否显示刻度
		    	  ticks : arrayKey  ,
		    	  tickOptions: {
		    	  show: true,
	              fontSize: '14px',
	              showLabel: true, //是否显示刻度线以及坐标轴上的刻度值
				  showMark: false,//设置是否显示刻度
				  showGridline: true // 是否在图表区域显示刻度值方向的网格
		    	  }
		      }
		    },
		    yaxis: {
		    	show: true,
				showTicks: true,        // 是否显示刻度线以及坐标轴上的刻度值  
				showTickMarks: true,     //设置是否显示刻度
				autoscale: true,    //自动定标
				borderWidth: 1,
				ticks : arrayValue  ,
				tickOptions: {
				show: false,
				showLabel: false,
				showMark: true,
				showGridline: true,
				 formatString : '%.2f'
	            }
	         }
    });  
}  

$(function() {  
    $("#chart").empty();  
    var url = "json/getInfoTest.d";  
    var type = '简易的柱状图';  
    var param = {  
        type : type  
    };  
    $.post(url, param, function(data) {  
        var index = 0;  
            var arrayKey = new Array(); //the values compared to the scale on x axis to display  
            var arrayValue = new Array();   //y轴对应的数据
            $.each(data, function(key, value) { 
                arrayKey[index] = key;  
                arrayValue[index] = [ value, index + 1 ];  
                index++;  
            });  
            var chartWidth = index * (10 + 50);      //the width of the div #chart  
            var chartHeight = (index + 1) * 37 + 15;   //the height of the div #chart,37 is calculated by barMargin+barWidth   
            var chart = {  
                width : chartWidth + 'px',  
                height : chartHeight + 'px'  
            };  
            $("#chart").css(chart);  
            drawHistogram(type, arrayKey, arrayValue);  

            $("#chart").css("left",  
                    ($(window).width() - $("#chart").width()) / 2);  
            $("#chart").css("top",  
                    ($(window).height() - $("#chart").height()) / 2);  
        }, 'json');  
});  
</script>
</body>

</pre><pre name="code" class="html">

</pre><pre name="code" class="html">后台java代码

</pre><pre name="code" class="html"><pre name="code" class="java">public void getInfoTest(){
		System.out.println(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"+":调用了呢");
		Map map = new LinkedMap();
		map.put("a", 1);
		map.put("b", 2);
		map.put("c", 3);
		map.put("d", 4);
		map.put("e", 5);
		List list = new ArrayList();
		list.add(map);
		System.out.println(JSONArray.fromObject(list).toString());
		Response.Action(JSONObject.fromObject(map).toString());
	}

效果：