jquery 图形报表插件jqplot 柱状图

来源：互联网发布：xp如何添加网络连接编辑：程序博客网时间：2024/06/07 15:15

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>显示报表</title>

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

<script type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
        <link rel="stylesheet" href="jqplot/jquery.jqplot.css" type="text/css"></link>

        
        <script language="javascript" type="text/javascript" src="jqplot/excanvas.js"></script>

<script type="text/javascript"
            src="jqplot/plugins/jqplot.barRenderer.js"></script>
        <script type="text/javascript"
            src="jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>

line1 = [ 4, 7, 9, 16 ]; //子统计1数据
line2 = [ 3, 7, 9.25, 3.125 ]; //子统计2数据

        //--最简
        plot = $.jqplot('chart', [ line1 ], {
            seriesDefaults : {
                renderer : $.jqplot.BarRenderer, //使用柱状图表示
                rendererOptions : {
                    barMargin : 35
                //柱状体组之间间隔
                }
            }
        });

        //--双柱状图
        plot1 = $.jqplot('chart1', [ line1, line2 ], {
            seriesDefaults : {
                renderer : $.jqplot.BarRenderer, //使用柱状图表示
                rendererOptions : {
                    barMargin : 35
                //柱状体组之间间隔
                }
            }
        });

        //--添加横坐标分类
        plot2 = $.jqplot('chart2', [ line1, line2 ], {
            seriesDefaults : {
                renderer : $.jqplot.BarRenderer, //使用柱状图表示
                rendererOptions : {
                    barMargin : 10
                //柱状体组之间间隔
                }
            },
            axes : {
                xaxis : {
                    ticks : [ '区域1', '区域2', '区域3', '区域4' ],
                    renderer : $.jqplot.CategoryAxisRenderer
                //x轴绘制方式
            }
        }
        });

});
</script>
</head>