摘自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>
效果:
二、实现提示鼠标位置坐标,及类别提示框
<!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完整的生成折线图和柱状图例子
asp图形报表,柱状图,饼形图,charlet报表 柱状图,饼形图都做了封装,直接给数据集即可
3种超炫 jquery 报表插件(柱状,饼图,曲线)
js图形报表,柱状图,饼状图报表,简单美观,修改数字既可以使用
jqPlot 图形报表插件简介及参数详解(jquery) 前边也讲过一个基于java的图形报表,功能及外观也不错,但存在通用性的问题。所以我们来学一个具有易用性+兼容性+可扩展性的js图表插件。 jqPlot是一款基于jquery类库的...
jqplot柱状图示例,加鼠标移动,示例+JS
两个图形报表插件,可以通过数据表简单的创建图形报表,柱状图,线性图,饼图
我的JavaWeb图形报表柱状图实例 博文链接:https://zmx.iteye.com/blog/375727
jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线形图、条形图、饼形图。jqPlot支持为图表设置各种不同的样式,提供Tooltips,数据点高亮显示等功能柱状图可以提供坐标轴定制、柱条宽度、颜色定制和阴影设置等等...
主要介绍了使用jQuery jqPlot插件绘制柱状图,需要的朋友可以参考下
基于LiveCharts.Wpf.Core(0.9.8)的几个图形报表实例(柱状图,曲线图,分组柱状图,饼状图) 运行环境 net6 开发语言C# VS2022
jqplot是一个十分强大的jQuery绘制图表的插件,支持折线图、柱状图、饼图等等多种形态。
jqplot 柱状图源代码、饼形图源代码、折线图源代码
插件描述:jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图、柱状图和饼图。参考示例:http://www.jq22.com/jquery-info5115
jquery 实现的一款报表,可以在页面中展示,包括常用的饼状图、柱状图等。jsp、asp等都可以使用,在页面中展示生成统计图等,非常实用,使用也很简单,看一眼估计就懂
插件描述:支持柱状图、圆饼图以及线性图 参考示例:http://www.jq22.com/jquery-info5330
统计分析时所需图状报表,包括柱状图,饼状图,折线图
图形报表生成饼状图,折线图,柱状图,对是基于MyEclipse的,能生成报表。动态的显示数据,将数据变成了可直观的观看,有利于对数据的分析。、。
jquery 实现的一款报表,可以在页面中展示,包括常用的饼状图、柱状图等。jsp、asp等都可以使用,在页面中展示生成统计图等,非常实用,使用也很简单,看一眼估计就懂。