當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jqPlot图表插件使用说明（一）

發(fā)布時間：2025/3/19 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 jqPlot图表插件使用说明（一）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

2019獨角獸企業(yè)重金招聘Python工程師標準>>>

最簡陋的線形圖

第一步：引入必要的CSS、JS文件

第二步：在body中準備要繪制圖表的節(jié)點

<div?id="chart1"?style="width:300px;height:300px;"></div>

第三步：編寫JS代碼，繪制圖表

$(function(){/***?第一個參數(shù)為body中div的id值*?第二個參數(shù)為要繪制的線形圖中各拐點的取值*?*/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代碼，第二個參數(shù)是否為二維數(shù)組，如果不是，則報此異常】

至此，我們就完成了最簡陋的圖表繪制。后面我們可以做出更為復(fù)雜的圖表，但都是基于以上步驟，除JS代碼不同外，沒有什么區(qū)別。故，接下來的重點將放在JS代碼上，其它步驟，不做贅述。

配置圖表屬性

jqPlot提供很多的屬性可以設(shè)置，通過不同的屬性，圖表可以展現(xiàn)出各式各樣的外觀。和其它jQuery插件類似，jqPlot的配置也是采用js的對象作為參數(shù)傳遞。因此，如果我們要給圖表添加一些額外的屬性，JS代碼應(yīng)該如下：

var?plot?=?$.jqplot('chart1',?[[3,7,9,1,4,6,8,2,5]],?{//?配置屬性代碼 });

所有的屬性配置都將以鍵值對的形式出現(xiàn)在{}之間。

圖表作為一種常見的數(shù)據(jù)表現(xiàn)形式，尤其是線形圖表，它具有一定的屬性對象，包括但不限于以下幾種：

標題；
坐標軸，又分為X軸、Y軸；
數(shù)據(jù)序列；
圖例；
背景；
光標，如鼠標經(jīng)過數(shù)據(jù)拐點時，提示該點具體數(shù)值。

其中以上每一條都可以作為單獨的對象，并衍生出更多的屬性。以標題為例，標題可以包含文本、字體、顏色、對齊方式等屬性。這些對象和屬性，都可以作為一個總的配置對象，傳遞給jqPlot，以便使jqPlot能夠更加精準的繪制圖表。從最外層來看，第三個配置屬性的參數(shù)應(yīng)該是如下結(jié)構(gòu)：

{title:{?//?標題屬性},axesDefaults:{?//?默認坐標軸屬性?},axes:{?//?具體坐標軸屬性}legend:{?//?圖例屬性},grid:{?//?背景網(wǎng)格屬性?},seriesDefaults:{//?默認數(shù)據(jù)序列屬性},series:{?//?具體數(shù)據(jù)序列屬性},legend:{?//?圖例屬性},cursor:{?//?光標屬性} }

進而深入到具體屬性的配置，以標題為例，結(jié)構(gòu)如下：

title:{?//?標題屬性text:'圖表標題',?//?標題文本show:true,?//?是否陰影fontFamily:'微軟雅黑',?//?標題字體?fontSize:14,?//?標題字體大小textAlign:'center',?//?標題對齊方式textColor:'red',?//?標題顏色（也可以寫作屬性color）escapeHtml:false?//?是否轉(zhuǎn)義HTML字符，值為false時，可以在text屬性中使用HTML代碼 }

其它如legend、grid、series等也是類似結(jié)構(gòu)，具體可以配置屬性列表，可以參考http://www.jqplot.com/docs/files/jqPlotOptions-txt.html。

帶有其它設(shè)置的圖表

有了之前對jqPlot圖表的了解，我們就可以繪制出更為復(fù)雜些的圖表。示例如下：

$(function(){/***?第一個參數(shù)為body中div的id值*?第二個參數(shù)為要繪制的線形圖中各拐點的取值*?*/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月廣告位投放數(shù)量趨勢圖<div>',?????????//?標題文本show:true,??????????????//?是否陰影fontFamily:'微軟雅黑',??//?標題字體?fontSize:14,????????????//?標題字體大小textAlign:'left',???????//?標題對齊方式textColor:'#515151',????//?標題顏色（也可以寫作屬性color）escapeHtml:false????????//?是否轉(zhuǎn)義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:?'投放數(shù)量'}},legend:{????????//?圖例屬性show:true},grid:{??????????//?背景網(wǎng)格屬性?borderWidth:1,shadow:false},seriesDefaults:{//?默認數(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'}}); });

因為在配置圖表的標題（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; }

其它部分代碼沒有改動，此時在頁面中查看圖表展示效果，如下：

完整代碼

目錄結(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><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(){/***?第一個參數(shù)為body中div的id值*?第二個參數(shù)為要繪制的線形圖中各拐點的取值*?*/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月廣告位投放數(shù)量趨勢圖<div>',???????????//?標題文本show:true,??????????????//?是否陰影fontFamily:'微軟雅黑',??//?標題字體?fontSize:14,????????????//?標題字體大小textAlign:'left',???????//?標題對齊方式textColor:'#515151',????//?標題顏色（也可以寫作屬性color）escapeHtml:false????????//?是否轉(zhuǎn)義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:?'投放數(shù)量'}},legend:{????????//?圖例屬性show:true},grid:{??????????//?背景網(wǎng)格屬性?borderWidth:1,shadow:false},seriesDefaults:{//?默認數(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><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图表插件使用说明（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： MySQL性能调优的14板斧
下一篇： Microsoft Dynamics C