第一步:引入必要的CSS、JS文件javascript
<link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/> <!-- excanvas.js用於兼容IE瀏覽器 --> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"> <!-- jQuery庫,此處引用自百度api庫 --> <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script> <!-- jqPlot自身支持文件,不帶有min的爲未壓縮版 --> <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript" charset="utf-8"></script>
第二步:在body中準備要繪製圖表的節點css
<!-- 用於繪製圖表,id在JS代碼中會用到 --> <div id="chart1" style="width:300px;height:300px;"></div>
第三步:編寫JS代碼,繪製圖表html
$(function(){ /** * 第一個參數爲body中div的id值 * 第二個參數爲要繪製的線形圖中各拐點的取值 * */ var plot = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]]); });
第四步:查看效果
java
第五步:常見問題jquery
Uncaught ReferenceError: jQuery is not defined【檢查是否引入了jQuery庫,或者jQuery庫是否在其餘JS文件以前被引入。】canvas
Uncaught TypeError: Cannot read property 'msie' of undefined【檢查jQuery庫版本是否爲2.X,嘗試下降jQuery庫版本,但不能低於1.4版本,不能高於1.8版本。】api
Uncaught No Data 【檢查JS代碼,第二個參數是否爲二維數組,若是不是,則報此異常】數組
至此,咱們就完成了最簡陋的圖表繪製。後面咱們能夠作出更爲複雜的圖表,但都是基於以上步驟,除JS代碼不一樣外,沒有什麼區別。故,接下來的重點將放在JS代碼上,其它步驟,不作贅述。 瀏覽器
jqPlot提供不少的屬性能夠設置,經過不一樣的屬性,圖表能夠展示出各式各樣的外觀。和其它jQuery插件相似,jqPlot的配置也是採用js的對象做爲參數傳遞。所以,若是咱們要給圖表添加一些額外的屬性,JS代碼應該以下:
字體
var plot = $.jqplot('chart1', [[3,7,9,1,4,6,8,2,5]], { // 配置屬性代碼 });
全部的屬性配置都將以鍵值對的形式出如今{}之間。
圖表做爲一種常見的數據表現形式,尤爲是線形圖表,它具備必定的屬性對象,包括但不限於如下幾種:
標題;
座標軸,又分爲X軸、Y軸;
數據序列;
圖例;
背景;
光標,如鼠標通過數據拐點時,提示該點具體數值。
其中以上每一條均可以做爲單獨的對象,並衍生出更多的屬性。以標題爲例,標題能夠包含文本、字體、顏色、對齊方式等屬性。這些對象和屬性,均可以做爲一個總的配置對象,傳遞給jqPlot,以便使jqPlot可以更加精準的繪製圖表。從最外層來看,第三個配置屬性的參數應該是以下結構:
{ title:{ // 標題屬性 }, axesDefaults:{ // 默認座標軸屬性 }, axes:{ // 具體座標軸屬性 } legend:{ // 圖例屬性 }, grid:{ // 背景網格屬性 }, seriesDefaults:{// 默認數據序列屬性 }, series:{ // 具體數據序列屬性 }, legend:{ // 圖例屬性 }, cursor:{ // 光標屬性 } }
進而深刻到具體屬性的配置,以標題爲例,結構以下:
title:{ // 標題屬性 text:'圖表標題', // 標題文本 show:true, // 是否陰影 fontFamily:'微軟雅黑', // 標題字體 fontSize:14, // 標題字體大小 textAlign:'center', // 標題對齊方式 textColor:'red', // 標題顏色(也能夠寫做屬性color) escapeHtml:false // 是否轉義HTML字符,值爲false時,能夠在text屬性中使用HTML代碼 }
其它如legend、grid、series等也是相似結構,具體能夠配置屬性列表,能夠參考http://www.jqplot.com/docs/files/jqPlotOptions-txt.html。
有了以前對jqPlot圖表的瞭解,咱們就能夠繪製出更爲複雜些的圖表。示例以下:
$(function(){ /** * 第一個參數爲body中div的id值 * 第二個參數爲要繪製的線形圖中各拐點的取值 * */ var data = [[38, 3, 9, 8, 49, 27, 14, 46, 32, 4, 12, 6, 47, 15, 24, 39, 16, 48, 5, 6, 6, 43, 42, 2, 29, 37, 21, 28, 40, 17, 3], [45, 24, 24, 29, 3, 19, 32, 45, 41, 8, 34, 17, 1, 45, 37, 47, 34, 30, 31, 10, 29, 17, 5, 23, 41, 49, 25, 34, 4, 13, 49], [43, 23, 37, 12, 26, 11, 29, 29, 22, 27, 25, 5, 18, 34, 20, 3, 8, 16, 41, 19, 9, 5, 16, 30, 13, 44, 22, 29, 5, 23, 13] ]; var plot = $.jqplot('chart1', data, { title:{ // 標題屬性 text:'<div class="chart-title">2014年5月廣告位投放數量趨勢圖<div>', // 標題文本 show:true, // 是否陰影 fontFamily:'微軟雅黑', // 標題字體 fontSize:14, // 標題字體大小 textAlign:'left', // 標題對齊方式 textColor:'#515151', // 標題顏色(也能夠寫做屬性color) escapeHtml:false // 是否轉義HTML字符,值爲false時,能夠在text屬性中使用HTML代碼 }, axesDefaults:{ // 默認座標軸屬性 min:0, tickOptions:{ showMark:false } }, axes:{ // 具體座標軸屬性 xaxis:{ label:'日期', ticks:[[1,'05/01'], [5,'05/05'], [10,'05/10'], [15,'05/15'], [20,'05/20'], [25,'05/25'], [30,'05/30']] }, yaxis: { label: '投放數量' } }, legend:{ // 圖例屬性 show:true }, grid:{ // 背景網格屬性 borderWidth:1, shadow:false }, seriesDefaults:{// 默認數據序列屬性 lineWidth:1, markerOptions:{ show:true } }, series:[ // 具體數據序列屬性 { color:'#FF6666', label:'CPC' },{ color:'#0066CC', label:'CPT' },{ color:'#99CC66', label:'CPM' } ], highlighter:{ show:true, tooltipAxes:'y', useAxesFormatters:false, tooltipFormatString:'投放量:%d' } }); });
由於在配置圖表的標題(title)時,使用HTML標籤,這個標籤用了一個chart-title類的CSS,因此要加入以下CSS代碼:
.chart-title{ background-color: #999999; margin-bottom: 10px; line-height: 30px; padding-left: 10px; background-color: #efefef; border-bottom:1px solid #dddddd; font-weight: bold; } #chart1{ border: 1px solid #dddddd; }
其它部分代碼沒有改動,此時在頁面中查看圖表展現效果,以下:
目錄結構:
完整代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jqPlot圖表Demo</title> <link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/> <style type="text/css"> .chart-title{ background-color: #999999; margin-bottom: 10px; line-height: 30px; padding-left: 10px; background-color: #efefef; border-bottom:1px solid #dddddd; font-weight: bold; } #chart1{ border: 1px solid #dddddd; } </style> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script><![endif]--> <script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script> <script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasTextRenderer.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqPlot/1.0.4/plugins/jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqPlot/1.0.4/plugins/jqplot.cursor.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqPlot/1.0.4/plugins/jqplot.highlighter.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function(){ /** * 第一個參數爲body中div的id值 * 第二個參數爲要繪製的線形圖中各拐點的取值 * */ var data = [[38, 3, 9, 8, 49, 27, 14, 46, 32, 4, 12, 6, 47, 15, 24, 39, 16, 48, 5, 6, 6, 43, 42, 2, 29, 37, 21, 28, 40, 17, 3], [45, 24, 24, 29, 3, 19, 32, 45, 41, 8, 34, 17, 1, 45, 37, 47, 34, 30, 31, 10, 29, 17, 5, 23, 41, 49, 25, 34, 4, 13, 49], [43, 23, 37, 12, 26, 11, 29, 29, 22, 27, 25, 5, 18, 34, 20, 3, 8, 16, 41, 19, 9, 5, 16, 30, 13, 44, 22, 29, 5, 23, 13] ] var plot = $.jqplot('chart1', data, { title:{ // 標題屬性 text:'<div class="chart-title">2014年5月廣告位投放數量趨勢圖<div>', // 標題文本 show:true, // 是否陰影 fontFamily:'微軟雅黑', // 標題字體 fontSize:14, // 標題字體大小 textAlign:'left', // 標題對齊方式 textColor:'#515151', // 標題顏色(也能夠寫做屬性color) escapeHtml:false // 是否轉義HTML字符,值爲false時,能夠在text屬性中使用HTML代碼 }, axesDefaults:{ // 默認座標軸屬性 min:0, tickOptions:{ showMark:false } }, axes:{ // 具體座標軸屬性 xaxis:{ label:'日期', ticks:[[1,'05/01'], [5,'05/05'], [10,'05/10'], [15,'05/15'], [20,'05/20'], [25,'05/25'], [30,'05/30']] }, yaxis: { label: '投放數量' } }, legend:{ // 圖例屬性 show:true }, grid:{ // 背景網格屬性 borderWidth:1, shadow:false }, seriesDefaults:{// 默認數據序列屬性 lineWidth:1, markerOptions:{ show:true } }, series:[ // 具體數據序列屬性 { color:'#FF6666', label:'CPC' },{ color:'#0066CC', label:'CPT' },{ color:'#99CC66', label:'CPM' } ], highlighter:{ show:true, tooltipAxes:'y', useAxesFormatters:false, tooltipFormatString:'投放量:%d' } }); }); </script> </head> <body> <!-- 用於繪製圖表,id在JS代碼中會用到 --> <div id="chart1" style="width:800px;height:400px;"></div> </body> </html>