Django+JQuery插件输出报表
<div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li><span style="color:#000000;"><span style="color:#0000CC;"><</span><span style="color:#0000CC;">!</span><span style="color:#0000CC;">-</span><span style="color:#0000CC;">-</span><span style="color:#0000CC;">[</span><span style="color:#0000FF;">if</span> lt IE 9<span style="color:#0000CC;">]</span><span style="color:#0000CC;">></span><span style="color:#0000CC;"><</span>script language<span style="color:#0000CC;">=</span><span style="color:#FF00FF;">"javascript"</span> <span style="color:#0000FF;">type</span><span style="color:#0000CC;">=</span><span style="color:#FF00FF;">"text/javascript"</span> src<span style="color:#0000CC;">=</span><span style="color:#FF00FF;">"/site_media/js/excanvas.js"</span><span style="color:#0000CC;">></span><span style="color:#0000CC;"><</span><span style="color:#0000CC;">/</span>script<span style="color:#0000CC;">></span><span style="color:#0000CC;"><</span><span style="color:#0000CC;">!</span><span style="color:#0000CC;">[</span>endif<span style="color:#0000CC;">]</span><span style="color:#0000CC;">-</span><span style="color:#0000CC;">-</span><span style="color:#0000CC;">></span><br></span></li><li> <span style="color:#0000CC;"><</span>link rel<span style="color:#0000CC;">=</span><span style="color:#FF00FF;">"stylesheet"</span> <span style="color:#0000FF;">type</span><span style="color:#0000CC;">=</span><span style="color:#FF00FF;">"text/css"</span> href<span style="color:#0000CC;">=</span><span style="color:#FF00FF;">"/site_media/css/jquery.jqplot.css"</span> <span style="color:#0000CC;">/</span><span style="color:#0000CC;">></span><br></li><li>
<span style="color:#0000CC;"><</span>script language<span style="color:#0000CC;">=</span><span style="color:#FF00FF;">"javascript"</span> <span style="color:#0000FF;">type</span><span style="color:#0000CC;">=</span><span style="color:#FF00FF;">"text/javascript"</span> src<span style="color:#0000CC;">=</span><span style="color:#FF00FF;">"/site_media/js/jquery.jqplot.js"</span><span style="color:#0000CC;">></span><span style="color:#0000CC;"><</span><span style="color:#0000CC;">/</span>script<span style="color:#0000CC;">></span><br></li><li>
<span style="color:#0000CC;"><</span>script language<span style="color:#0000CC;">=</span><span style="color:#FF00FF;">"javascript"</span> <span style="color:#0000FF;">type</span><span style="color:#0000CC;">=</span><span style="color:#FF00FF;">"text/javascript"</span> src<span style="color:#0000CC;">=</span><span style="color:#FF00FF;">"/site_media/js/jqplot.dateAxisRenderer.min.js"</span><span style="color:#0000CC;">></span><span style="color:#0000CC;"><</span><span style="color:#0000CC;">/</span>script<span style="color:#0000CC;">></span><br></li><li>
$<span style="color:#0000CC;">(</span>document<span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span>ready<span style="color:#0000CC;">(</span><span style="color:#0000FF;">function</span><span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><br></li><li>
<span style="color:#0000CC;">{</span><span style="color:#0000FF;">var</span> line1 <span style="color:#0000CC;">=</span> $<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">"#abcdd"</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span>html<span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span><br></li><li>
<span style="color:#0000FF;">var</span> line2 <span style="color:#0000CC;">=</span> $<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">"#efgh"</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">.</span>html<span style="color:#0000CC;">(</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span><br></li><li>
<br></li><li>
<span style="color:#0000FF;">var</span> plot1 <span style="color:#0000CC;">=</span> $<span style="color:#0000CC;">.</span>jqplot<span style="color:#0000CC;">(</span><span style="color:#FF00FF;">'chart1'</span><span style="color:#0000CC;">,</span> <span style="color:#0000CC;">[</span>eval<span style="color:#0000CC;">(</span>line1<span style="color:#0000CC;">)</span><span style="color:#0000CC;">,</span>eval<span style="color:#0000CC;">(</span>line2<span style="color:#0000CC;">)</span><span style="color:#0000CC;">]</span><span style="color:#0000CC;">,</span> <span style="color:#0000CC;">{</span><br></li><li>
title<span style="color:#0000CC;">:</span><span style="color:#FF00FF;">'系统调用趋势图'</span><span style="color:#0000CC;">,</span><br></li><li>
axes<span style="color:#0000CC;">:</span><span style="color:#0000CC;">{</span>xaxis<span style="color:#0000CC;">:</span><span style="color:#0000CC;">{</span>renderer<span style="color:#0000CC;">:</span><span style="color:#0000CC;">$</span><span style="color:#0000CC;">.</span>jqplot<span style="color:#0000CC;">.</span>DateAxisRenderer<span style="color:#0000CC;">}</span><span style="color:#0000CC;">}</span><span style="color:#0000CC;">,</span></li><li>
legend<span style="color:#0000CC;">:</span> <span style="color:#0000CC;">{</span> <br></li><li>
show<span style="color:#0000CC;">:</span> true<br></li><li>
<span style="color:#0000CC;">}</span><span style="color:#0000CC;">,<span class="Apple-style-span" style="color: rgb(92, 92, 92); "> </span></span></li><li>
series<span style="color:#0000CC;">:</span><span style="color:#0000CC;">[</span><span style="color:#0000CC;">{</span><span style="color:#0000FF;">label</span><span style="color:#0000CC;">:</span> <span style="color:#FF00FF;">'get'</span><span style="color:#0000CC;">}</span><span style="color:#0000CC;">,</span> <span style="color:#0000CC;">{</span><span style="color:#0000FF;">label</span><span style="color:#0000CC;">:</span> <span style="color:#FF00FF;">'commit'</span><span style="color:#0000CC;">}</span><span style="color:#0000CC;">]</span><br></li><li>
<span style="color:#0000CC;">}</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;<span class="Apple-style-span" style="color: rgb(92, 92, 92); "> </span></span></li><li>
<span style="color:#0000CC;">}</span><span style="color:#0000CC;">)</span><span style="color:#0000CC;">;</span></li><li><span style="color:#0000CC;">相应的HTML代码如下</span></li><li><font class="Apple-style-span" color="#0000CC"><div id="chart1" style="margin-top:20px; margin-left:10px; width:880px; height:300px;"></div></font></li></ol><div><font class="Apple-style-span" color="#0000CC"><span class="Apple-style-span" style="line-height: 16px;"><br></span></font></div><div><font class="Apple-style-span" color="#0000CC"><span class="Apple-style-span" style="line-height: 16px;">注意一点“：它需要的数据为Object类型的。通过eval()可以将字符串转义成相应的对象类型！</span></font></div><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li><span style="color:#0000CC;"><br></span></li></ol></div>
页:
[1]