jquery图表插件--jqPlot实现柱状图
来源：互联网 发布：武林外传 无双 知乎 编辑：程序博客网 时间：2024/06/05 07:59
案例：（里面导入的js和css可以到官方网上下载）
柱状图(1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>柱状图demo1</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" /> <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js" ></script> <script language="javascript" type="text/javascript" src="jquery.jqplot.js" ></script> <script type="text/javascript" src="plugins/jqplot.barRenderer.js" ></script> <script type="text/javascript" src="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>
柱状图(2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>柱状图demo2</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" /> <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js" ></script> <script language="javascript" type="text/javascript" src="jquery.jqplot.js" ></script> <script type="text/javascript" src="plugins/jqplot.barRenderer.js" ></script> <script type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.js" ></script> <script type="text/javascript" src="plugins/jqplot.canvasTextRenderer.js" ></script> <script type="text/javascript" src="plugins/jqplot.canvasAxisLabelRenderer.js" ></script> <script type="text/javascript" src="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>
