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 图形报表插件jqplot 曲线图_第1张图片

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

导入相关介绍:
<!-- 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>

效果 图:

jquery 图形报表插件jqplot 曲线图_第2张图片

你可能感兴趣的:(jquery)