jqPlot 图形报表插件柱状图(jquery)

83570690

2012-10-29

摘自http://hi.baidu.com/hemes1314/item/99ac8bd41093dfcc1b72b404

jqplot默认制作曲线图，如果想做柱状图，必须引入plugin包中的插件js：

一、几个简单柱状图实例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>demo1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- jquery -->
<script type="text/javascript" src="../js/jquery-1.3.js"></script>

<!-- core -->
<script type="text/javascript" src="../jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" href="../jqplot/jquery.jqplot.css" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../jqplot/excanvas.js"></script><![endif]-->

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

<script type="text/javascript" language="javascript">
   
$(function(){
     line1 = [4, 2, 9, 16];           //子统计1数据
     line2 = [3, 7, 6.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>

<body>
    <span id="chart" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
    <span id="chart1" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
    <span id="chart2" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
</body>
</html>

效果：

jqPlot 图形报表插件柱状图(jquery) 二、实现提示鼠标位置坐标,及类别提示框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>demo2.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- jquery -->
<script type="text/javascript" src="../js/jquery-1.3.js"></script>

<!-- core -->
<script type="text/javascript" src="../jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" href="../jqplot/jquery.jqplot.css" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../jqplot/excanvas.js"></script><![endif]-->

<!-- plugin -->
<!-- 柱状图插件 -->
<script type="text/javascript" src="../jqplot/plugins/jqplot.barRenderer.js"></script>
<!-- 横坐标类别显示 -->
<script type="text/javascript" src="../jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<!-- 横、纵轴标题 -->
<script type="text/javascript" src="../jqplot/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="../jqplot/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<!-- 鼠标效果 -->
<script type="text/javascript" src="../jqplot/plugins/jqplot.cursor.js"></script>

<script type="text/javascript" language="javascript">
   
$(function(){
     line1 = [['区域1',610], ['区域2',220], ['区域3',530], ['区域4',340]];    //子统计1数据
     line2 = [['区域1',520], ['区域2',420], ['区域3',730], ['区域4',240]];    //子统计2数据
     
     //--添加横纵坐标分类
     plot = $.jqplot('chart', [line1], {
     title: '某销量统计图',
         seriesDefaults: {
         renderer: $.jqplot.BarRenderer, //使用柱状图表示
         rendererOptions: {
              barMargin: 30   //柱状体组之间间隔
          }
         },
         axes: {
             xaxis: {
                 renderer: $.jqplot.CategoryAxisRenderer, //x轴绘制方式
                 label: 'X',
           labelRenderer: $.jqplot.CanvasAxisLabelRenderer
             },
             yaxis: {
             min: 0,           //y轴最小值
             //max: 650,          //y轴最大值
             //numberTicks:6,           //网格线条数
             tickInterval: 200,        //网格线间隔大小
             label: 'Y',
           labelRenderer: $.jqplot.CanvasAxisLabelRenderer
            }
         }
     });
     
     plot1 = $.jqplot('chart1', [line1,line2], {
     title: '某销量统计图',
     legend: {show: true, location: 'ne'}, //提示工具栏--show：是否显示,location: 显示位置 (e:东,w:西,s:南,n:北,nw:西北,ne:东北,sw:西南,se:东南)
         series: [{label: '种类1'}, {label: '种类2'}], //提示工具栏
         
         seriesDefaults: {
         renderer: $.jqplot.BarRenderer, //使用柱状图表示
         rendererOptions: {
              barMargin: 20   //柱状体组之间间隔
          }
         },
         axes: {
             xaxis: {
                 renderer: $.jqplot.CategoryAxisRenderer //x轴绘制方式
             },
             yaxis: {
             min: 0,           //y轴最小值
             tickInterval: 200        //网格线间隔大小
            }
         },
         cursor: { 
     style: 'crosshair', //当鼠标移动到图片上时，鼠标的显示样式，该属性值为css类 
     show: true, //是否显示光标 
     showTooltip: true, // 是否显示提示信息栏 
     followMouse: false, //光标的提示信息栏是否随光标（鼠标）一起移动
     tooltipLocation: 'nw', //提示位置
     tooltipOffset: 6, //提示信息栏距鼠标(followMouse=true)或坐标轴（followMouse=false）的位置 
     showTooltipGridPosition: false,//是否在信息提示栏中显示光标位置（取其据图标左和上边缘线像素距离） 
     showTooltipUnitPosition: true// 是否显示提示光标所在位置（取其在横纵轴上数据值）的信息栏 
    }
     });
    
});
</script>

</head>

<body>
    <span id="chart" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
    <span id="chart1" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
</body>
</html>

效果图：

jqPlot 图形报表插件柱状图(jquery)