jquery 图形报表插件jqplot 曲线图
下载jqPlot压缩包后（目前是0.70版 本），可以看到以下主要文件：jquery-1.3.2.js，jquery1.3.2类库文件；jquery.jqplot.js，功能主文 件；jquery.jqplot.css，图表样式文件；excanvas.js，针对ie浏览器的修正文件；test*.html，一些示例文 件；plugins文件夹中放置jqplot的各种图表插件。
下边贴几个曲线图的示例：
一、简单的曲线图示例：
所需基本js：
<!-- 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.categoryAxisRenderer.js"></script>
js脚本：
<script type="text/javascript" language="javascript">
$(function(){
line1 = [[1,3],[2,7],[3,2], [4,9], [5,16], [6,8], [7,12]];
//--最简单
plot1 = $.jqplot('chart', [line1]);
//添加横坐标分类--jqplot.categoryAxisRenderer.js
plot2 = $.jqplot('chart2', [line1], {
title: '一周销量情况', //图表表头标题
axes: {
xaxis: {
ticks:['周日', '周一', '周二', '周三', '周四','周五','周六'],
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
</script>
html添加几个div用来显示图表：
<body style="font-size: 12px">
<span id="chart" 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>
<br><br><br>
<a href="">详情请点击这里</a>
</body>
效果图：
二、详细参数配置及实现高亮显示功能：
导入相关介绍：
<!-- 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.categoryAxisRenderer.js"></script>
<!-- 高亮显示 -->
<script type="text/javascript" src="../jqplot/plugins/jqplot.highlighter.js"></script>
js脚本：
<script type="text/javascript" language="javascript">
$(function(){
line1 = [[1,3], [2,7], [3,2], [4,9], [5,16], [6,8], [7,12]];
line2 = [[1,4], [2,5], [3,4], [4,8], [5,13], [6,7], [7,17]];
//详细配置
plot = $.jqplot('chart', [line1,line2], {
title: '一周销量情况', //图表表头标题
axes: {
xaxis: { min: 0, max: 8}, //准确控制x轴最大值及最小值
yaxis: { min: 0, max: 20, numberTicks: 5}, //准确控制y轴最大值及最小值,间隔个数
xaxis: {
ticks:['周日', '周一', '周二', '周三', '周四','周五','周六'],
renderer: $.jqplot.CategoryAxisRenderer
}
},
//series: [{ color: '#5FAB78'}], //定义趋势线颜色
highlighter: {
lineWidthAdjust: 50, //当鼠标移动到放大的数据点上时，设置增大的数据点的宽度,目前仅适用于非实心数据点
sizeAdjust: 10, // 当鼠标移动到数据点上时，数据点扩大的增量增量
showTooltip: true, // 是否显示提示信息栏
tooltipLocation: 'nw', // 提示信息显示位置（英文方向的首写字母）: n, ne, e, se, s, sw, w, nw.
tooltipAxes: 'xy', // 提示信息框显示数据点那个坐标轴上的值，目前有横/纵/横纵三种方式,值分别为 x, y or xy.
tooltipSeparator: ',' // 提示信息栏不同值之间的间隔符号
}
});
});
</script>
html显示图表div：
<body>
<span id="chart" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
<br><br><br><br><br><br><br><br><br>
<a href="" style="font-size: 12px;">详情请点击这里</a>
</body>
效果 图：
