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

jqPlot——基于jquery的图表绘制工具简单使用,jqPlot 在firefox 火狐浏览器里面,图表右侧的标题,变形的解决方法

2012-09-28 16:09 1161 查看
目前实现的功能和未实现需要深入研究的有1:同时至少N条线的绘制和不同颜色的演示(N至少大于8不会有任何问题,问题是太多了之后,颜色难以区分,而且如果有些点重合的话,也不方便看)2:X轴显示日期,Y轴显示点击量,图表的右侧显示哪几条线的颜色(实例里面可以点击最右边的颜色,来动态的隐藏坐标图里面的线,但是我没有测试出来)3:X轴,如果是时间的话,能用天数,月数,年数来间隔显示每一个点,问题是,到底用多大来间隔,我现在是定死的,例如我定死为2天,但是实际情况中,需要调整为动态,或者是说应该能根据什么数据来动态的调整间隔4:当框中几个点或者是区域之后,可以放大显示,双击还原。问题是放大之后,X轴上面因为日期太密显得很难看5:前台部分代码,jqPlot 在firefox 火狐浏览器里面,图标右侧的标题,会变形,解决方法是在控制 标题的 lable的子元素里面,手动加一个div包括起来,定义一个css
series: [{ label: '<div class=adCountTitle><div style=float:right>  (点击量:3)</div>即将上线</div>' },
{ label: '<div class=adCountTitle><div style=float:right>  (点击量:1)</div>这是一个演示</div>'
}], //右侧的每个广告的title
.adCountTitle{ width:200px;}
======================生成的前台html代码 ================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><script   type="text/javascript" src="../Scripts/jquery-1.4.4.min.js"></script><link class="include" rel="stylesheet" type="text/css" href="../Scripts/plugins/jqPlot/jquery.jqplot.min.css" /><!--[if lt IE 9]><script src="../Scripts/plugins/jqPlot/excanvas.js"></script><![endif]--><!--重要的开始--><script type="text/javascript" src="../Scripts/plugins/jqPlot/jquery.jqplot.min.js"></script><script type="text/javascript">$(document).ready(function(){var line0 = [['2012-10-14', 0],['2012-10-15', 3],['2012-10-20', 0]];
var line1 = [['2012-10-14', 0],['2012-10-15', 1],['2012-10-20', 0]];$('#chart1').jqplot([line0,line1],{series: [{ label: '<div class=adCountTitle><div style=float:right>  (点击量:3)</div>即将上线</div>' },
{ label: '<div class=adCountTitle><div style=float:right>  (点击量:1)</div>这是一个演示</div>'
        }], //右侧的每个广告的titleseriesColors: ["#4bb2c5", "#c5b47f", "#EAA228","#953579", "#4b5de4",  "#ff5800"],  // 默认显示的分类颜色,title:'<strong>本周统计</strong>',axes:{xaxis: {  //横坐标 x轴label: "时间刻度:年-月-日",labelOptions: {fontFamily: '黑体',textColor: "pink",fontSize: '11pt'},renderer:$.jqplot.DateAxisRenderer,tickOptions:{formatString: '%Y-%m-%d'} ,min: '2012-10-13', max: '2012-10-21', tickInterval: '1 day'  //开始,结束,间隔时间(可以是年,月,日)},yaxis: {label: "点击次数",labelOptions: {fontFamily: '黑体',textColor: "green",fontSize: '11pt'},tickOptions:{formatString: '%.1i'        // %百分号就表示值  .2f 表示float类型?小数点后2位?}}},highlighter: {  //荧光笔 高亮笔show: true,sizeAdjust: 20,        //尺寸调整fadeTooltip: true,formatString: '<table bgcolor="#f2f2f2"> \<tr><td>时间:</td><td>%s</td></tr> \<tr><td>点击量:</td><td>%s</td></tr> \</table>'       //这里的%s是按照 数组里面的顺序来显示的},legend: {show: true,//设置是否出现分类名称框(即所有分类的名称出现在图的某个位置)location: 'ne',     // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w.background:'blue',        //分类名称框距图表区域背景色textColor:'red' ,        //分类名称框距图表区域内字体颜色placement: 'outside'},cursor: {show: true,zoom: true,looseZoom: true,showTooltip: false },});});</script></head><body><div id="chart1" style="height:400px; width:900px; margin-left:60px;"></div><!--鼠标放上去 显示圆圈以及注释--><script  language="javascript" type="text/javascript" src="../Scripts/plugins/jqPlot/jqplot.highlighter.min.js"></script><!--缩放的--><script   language="javascript" type="text/javascript" src="../Scripts/plugins/jqPlot/jqplot.cursor.min.js"></script><!--主要用来显示数据的渲染器--><script   language="javascript" type="text/javascript" src="../Scripts/plugins/jqPlot/jqplot.dateAxisRenderer.min.js"></script><!--结束--></body></html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: