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