案例：（里面导入的js和css可以到官方网上下载）
柱状图(1)
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><title>柱状图demo1</title><metahttp-equiv="content-type"content="text/html;charset=UTF-8"><!--[ifIE]><scriptlanguage="javascript"type="text/javascript"src="excanvas.js"></script><![endif]--> <linkrel="stylesheet"type="text/css"href="jquery.jqplot.css"/> <scriptlanguage="javascript"type="text/javascript"src="jquery-1.4.2.min.js"></script> <scriptlanguage="javascript"type="text/javascript"src="jquery.jqplot.js"></script><!--plugin--><scripttype="text/javascript"src="plugins/jqplot.barRenderer.js"></script><scripttype="text/javascript"src="plugins/jqplot.categoryAxisRenderer.js"></script><scripttype="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><spanid="chart"style="margin-top:20px;margin-left:20px;width:400px;height:240px;"></span><spanid="chart1"style="margin-top:20px;margin-left:20px;width:400px;height:240px;"></span><spanid="chart2"style="margin-top:20px;margin-left:20px;width:400px;height:240px;"></span></body></html>
柱状图(2)
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><title>柱状图demo2</title><metahttp-equiv="content-type"content="text/html;charset=UTF-8"><!--jquery--><!--[ifIE]><scriptlanguage="javascript"type="text/javascript"src="excanvas.js"></script><![endif]--> <linkrel="stylesheet"type="text/css"href="jquery.jqplot.css"/> <scriptlanguage="javascript"type="text/javascript"src="jquery-1.4.2.min.js"></script> <scriptlanguage="javascript"type="text/javascript"src="jquery.jqplot.js"></script><!--plugin--><!--柱状图插件--><scripttype="text/javascript"src="plugins/jqplot.barRenderer.js"></script><!--横坐标类别显示--><scripttype="text/javascript"src="plugins/jqplot.categoryAxisRenderer.js"></script><!--横、纵轴标题--><scripttype="text/javascript"src="plugins/jqplot.canvasTextRenderer.js"></script><scripttype="text/javascript"src="plugins/jqplot.canvasAxisLabelRenderer.js"></script><!--鼠标效果--><scripttype="text/javascript"src="plugins/jqplot.cursor.js"></script><scripttype="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><spanid="chart"style="margin-top:20px;margin-left:20px;width:400px;height:240px;"></span><spanid="chart1"style="margin-top:20px;margin-left:20px;width:400px;height:240px;"></span></body></html>
