2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
最簡(jiǎn)陋的線形圖
第一步：引入必要的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庫(kù)，此處引用自百度api庫(kù)?-->
<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中準(zhǔn)備要繪制圖表的節(jié)點(diǎn)
<!--?用于繪制圖表，id在JS代碼中會(huì)用到?-->
<div?id="chart1"?style="width:300px;height:300px;"></div>
第三步：編寫JS代碼，繪制圖表
$(function(){/***?第一個(gè)參數(shù)為body中div的id值*?第二個(gè)參數(shù)為要繪制的線形圖中各拐點(diǎn)的取值*?*/var?plot?=?$.jqplot('chart1',?[[3,7,9,1,4,6,8,2,5]]);
});
第四步：查看效果
第五步：常見(jiàn)問(wèn)題
Uncaught ReferenceError: jQuery is not defined【檢查是否引入了jQuery庫(kù)，或者jQuery庫(kù)是否在其他JS文件之前被引入。】
Uncaught TypeError: Cannot read property 'msie' of undefined【檢查jQuery庫(kù)版本是否為2.X，嘗試降低jQuery庫(kù)版本，但不能低于1.4版本，不能高于1.8版本。】
Uncaught No Data?【檢查JS代碼，第二個(gè)參數(shù)是否為二維數(shù)組，如果不是，則報(bào)此異常】
至此，我們就完成了最簡(jiǎn)陋的圖表繪制。后面我們可以做出更為復(fù)雜的圖表，但都是基于以上步驟，除JS代碼不同外，沒(méi)有什么區(qū)別。故，接下來(lái)的重點(diǎn)將放在JS代碼上，其它步驟，不做贅述。
配置圖表屬性
jqPlot提供很多的屬性可以設(shè)置，通過(guò)不同的屬性，圖表可以展現(xiàn)出各式各樣的外觀。和其它jQuery插件類似，jqPlot的配置也是采用js的對(duì)象作為參數(shù)傳遞。因此，如果我們要給圖表添加一些額外的屬性，JS代碼應(yīng)該如下：
var?plot?=?$.jqplot('chart1',?[[3,7,9,1,4,6,8,2,5]],?{//?配置屬性代碼
});
所有的屬性配置都將以鍵值對(duì)的形式出現(xiàn)在{}之間。
圖表作為一種常見(jiàn)的數(shù)據(jù)表現(xiàn)形式，尤其是線形圖表，它具有一定的屬性對(duì)象，包括但不限于以下幾種：
其中以上每一條都可以作為單獨(dú)的對(duì)象，并衍生出更多的屬性。以標(biāo)題為例，標(biāo)題可以包含文本、字體、顏色、對(duì)齊方式等屬性。這些對(duì)象和屬性，都可以作為一個(gè)總的配置對(duì)象，傳遞給jqPlot，以便使jqPlot能夠更加精準(zhǔn)的繪制圖表。從最外層來(lái)看，第三個(gè)配置屬性的參數(shù)應(yīng)該是如下結(jié)構(gòu)：
{title:{?//?標(biāo)題屬性},axesDefaults:{?//?默認(rèn)坐標(biāo)軸屬性?},axes:{?//?具體坐標(biāo)軸屬性}legend:{?//?圖例屬性},grid:{?//?背景網(wǎng)格屬性?},seriesDefaults:{//?默認(rèn)數(shù)據(jù)序列屬性},series:{?//?具體數(shù)據(jù)序列屬性},legend:{?//?圖例屬性},cursor:{?//?光標(biāo)屬性}
}
進(jìn)而深入到具體屬性的配置，以標(biāo)題為例，結(jié)構(gòu)如下：
title:{?//?標(biāo)題屬性text:'圖表標(biāo)題',?//?標(biāo)題文本show:true,?//?是否陰影fontFamily:'微軟雅黑',?//?標(biāo)題字體?fontSize:14,?//?標(biāo)題字體大小textAlign:'center',?//?標(biāo)題對(duì)齊方式textColor:'red',?//?標(biāo)題顏色（也可以寫作屬性color）escapeHtml:false?//?是否轉(zhuǎn)義HTML字符，值為false時(shí)，可以在text屬性中使用HTML代碼
}
其它如legend、grid、series等也是類似結(jié)構(gòu)，具體可以配置屬性列表，可以參考http://www.jqplot.com/docs/files/jqPlotOptions-txt.html。
帶有其它設(shè)置的圖表
有了之前對(duì)jqPlot圖表的了解，我們就可以繪制出更為復(fù)雜些的圖表。示例如下：
$(function(){/***?第一個(gè)參數(shù)為body中div的id值*?第二個(gè)參數(shù)為要繪制的線形圖中各拐點(diǎn)的取值*?*/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:{?????????//?標(biāo)題屬性text:'<div?class="chart-title">2014年5月廣告位投放數(shù)量趨勢(shì)圖<div>',?????????//?標(biāo)題文本show:true,??????????????//?是否陰影fontFamily:'微軟雅黑',??//?標(biāo)題字體?fontSize:14,????????????//?標(biāo)題字體大小textAlign:'left',???????//?標(biāo)題對(duì)齊方式textColor:'#515151',????//?標(biāo)題顏色（也可以寫作屬性color）escapeHtml:false????????//?是否轉(zhuǎn)義HTML字符，值為false時(shí)，可以在text屬性中使用HTML代碼},axesDefaults:{??//?默認(rèn)坐標(biāo)軸屬性??min:0,tickOptions:{showMark:false}},axes:{??????????//?具體坐標(biāo)軸屬性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:?'投放數(shù)量'}},legend:{????????//?圖例屬性show:true},grid:{??????????//?背景網(wǎng)格屬性?borderWidth:1,shadow:false},seriesDefaults:{//?默認(rèn)數(shù)據(jù)序列屬性lineWidth:1,markerOptions:{show:true}},series:[????????//?具體數(shù)據(jù)序列屬性{color:'#FF6666',label:'CPC'},{color:'#0066CC',label:'CPT'},{color:'#99CC66',label:'CPM'}],highlighter:{show:true,tooltipAxes:'y',useAxesFormatters:false,tooltipFormatString:'投放量：%d'}});
});
因?yàn)樵谂渲脠D表的標(biāo)題（title）時(shí)，使用HTML標(biāo)簽，這個(gè)標(biāo)簽用了一個(gè)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;
}
其它部分代碼沒(méi)有改動(dòng)，此時(shí)在頁(yè)面中查看圖表展示效果，如下：
完整代碼
目錄結(jié)構(gòu)：
完整代碼：
<!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(){/***?第一個(gè)參數(shù)為body中div的id值*?第二個(gè)參數(shù)為要繪制的線形圖中各拐點(diǎn)的取值*?*/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:{?????????//?標(biāo)題屬性text:'<div?class="chart-title">2014年5月廣告位投放數(shù)量趨勢(shì)圖<div>',???????????//?標(biāo)題文本show:true,??????????????//?是否陰影fontFamily:'微軟雅黑',??//?標(biāo)題字體?fontSize:14,????????????//?標(biāo)題字體大小textAlign:'left',???????//?標(biāo)題對(duì)齊方式textColor:'#515151',????//?標(biāo)題顏色（也可以寫作屬性color）escapeHtml:false????????//?是否轉(zhuǎn)義HTML字符，值為false時(shí)，可以在text屬性中使用HTML代碼},axesDefaults:{??//?默認(rèn)坐標(biāo)軸屬性??min:0,tickOptions:{showMark:false}},axes:{??????????//?具體坐標(biāo)軸屬性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:?'投放數(shù)量'}},legend:{????????//?圖例屬性show:true},grid:{??????????//?背景網(wǎng)格屬性?borderWidth:1,shadow:false},seriesDefaults:{//?默認(rèn)數(shù)據(jù)序列屬性lineWidth:1,markerOptions:{show:true}},series:[????????//?具體數(shù)據(jù)序列屬性{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代碼中會(huì)用到?--><div?id="chart1"?style="width:800px;height:400px;"></div></body>
</html>
版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。
轉(zhuǎn)載于:https://my.oschina.net/treenewbee/blog/489942
總結(jié)
以上是生活随笔為你收集整理的jqPlot图表插件使用说明（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
