RIA應(yīng)用開(kāi)發(fā)：11-jQuery圖表插件

1、jQuery圖表插件回顧表格分頁(yè)原理表格排序原理DataTables插件的使用學(xué)習(xí)目標(biāo)了解圖表插件jqPlot能夠使用圖表插件繪制線狀圖能夠使用圖表插件繪制柱狀圖能夠使用圖表插件繪制餅圖能夠使用數(shù)據(jù)庫(kù)中的數(shù)據(jù)做為圖表的數(shù)據(jù)源jqPlot插件jqPlot是一款基于jquery類(lèi)庫(kù)的圖表繪制插件。通過(guò)jqPlot可以在網(wǎng)頁(yè)中繪制線狀圖、柱狀圖、餅狀圖等。jqPlot具有插件可擴(kuò)展性，可以編寫(xiě)自己的圖表樣式。下載地址：/功能概述：有多種圖表樣式可供選擇（線狀圖、柱狀圖、餅圖）可以自定義日期軸線自動(dòng)計(jì)算趨勢(shì)線 工具條提示和高亮數(shù)據(jù)點(diǎn) jqPlot插件jqPlot插件1.引入JS文件（在IE9以下版本的

2、瀏覽器上則要引入excanvas.js文件，jqplot的CSS文件也要同時(shí)引入 ） 2.增加圖表展示區(qū)域的容器 3.定義圖表中的數(shù)據(jù) line1 = 1,3,2,7,3,2, 4,9, 5,16, 6,8, 7,12; 4.創(chuàng)建圖表 var plot1 = $.jqplot(chart, line1); jqPlot插件例1：繪制線狀圖（1.html）jqPlot插件jqPlot插件的option配置(docs/index.html)title：圖形的標(biāo)題axesDefaults ：坐標(biāo)軸上的默認(rèn)設(shè)置axes ：坐標(biāo)軸（設(shè)置X、Y坐標(biāo)） seriesDefaults ：分類(lèi)共性設(shè)置serie

3、s: 每個(gè)分類(lèi)的個(gè)性設(shè)置legend ：分類(lèi)名稱框設(shè)置grid：網(wǎng)格設(shè)置jqPlot插件例2: options參數(shù)的設(shè)置 (2.html)jqPlot插件jqPlot插件例3：柱狀圖(3.html)1、引入jqplot.barRenderer.js。2、增加options屬性的設(shè)置。seriesDefaults: renderer:$.jqplot.BarRenderer, pointLabels: show: true ,jqPlot插件jqPlot插件例四：柱狀圖(4.html)jqPlot插件例5：餅圖(5.html)1、引入jqplot.barRenderer.js。2、增加options屬性的設(shè)置。seriesDefaults:renderer:$.jqplot.PieRenderer,jqPlot插件jqPlot插件例6：從數(shù)據(jù)庫(kù)提取數(shù)據(jù)作為數(shù)據(jù)源jqPlot插件總結(jié)能夠使用圖