您的位置：首页 > Web前端 > JQuery

jquery 图形报表插件jqplot 曲线图

2010-04-16 09:58 796 查看

下载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：


<script type="text/javascript" src="../js/jquery-1.3.js"></script>


<script type="text/javascript" src="../jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" href="../jqplot/jquery.jqplot.css" type="text/css"></link>



<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>

效果图：

二、详细参数配置及实现高亮显示功能：

导入相关介绍：

<script type="text/javascript" src="../js/jquery-1.3.js"></script>


<script type="text/javascript" src="../jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" href="../jqplot/jquery.jqplot.css" type="text/css"></link>




<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>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航