2019獨角獸企業重金招聘Python工程師標準>>>
最簡陋的線形圖
第一步：引入必要的CSS、JS文件
<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中準備要繪制圖表的節點
<!--?用于繪制圖表，id在JS代碼中會用到?-->
<div?id="chart1"?style="width:300px;height:300px;"></div>
第三步：編寫JS代碼，繪制圖表
$(function(){/***?第一個參數為body中div的id值*?第二個參數為要繪制的線形圖中各拐點的取值*?*/var?plot?=?$.jqplot('chart1',?[[3,7,9,1,4,6,8,2,5]]);
});
第四步：查看效果
第五步：常見問題
Uncaught ReferenceError: jQuery is not defined【檢查是否引入了jQuery庫，或者jQuery庫是否在其他JS文件之前被引入。】
Uncaught TypeError: Cannot read property 'msie' of undefined【檢查jQuery庫版本是否為2.X，嘗試降低jQuery庫版本，但不能低于1.4版本，不能高于1.8版本。】
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>
版權聲明：本文為博主原創文章，未經博主允許不得轉載。
轉載于:https://my.oschina.net/treenewbee/blog/489942
總結
以上是生活随笔為你收集整理的jqPlot图表插件使用说明（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
