使用jQuery jqPlot插件繪制柱狀圖
在一個項目研發(fā)過程中,需要顯示賬戶的資金情況,為了給客戶良好的體驗我們采用了柱狀圖形展現(xiàn),繪圖的過程如果使用原生態(tài)腳本繪制這樣比較麻煩,時間也會比較長,所以我們選擇了jqPlot插件進行繪制,這樣可以節(jié)省大量的時間,也能很快就能展示給用戶。
插件官方地址:http://www.jqplot.com/
具體實現(xiàn)如下:
引用JS文件:
<link href="~/Scripts/asset/jqplot/jquery.jqplot.min.css" rel="stylesheet" />
<link href="~/Scripts/asset/jqplot/syntaxhighlighter/styles/shCoreDefault.min.css" rel="stylesheet" />
<link href="~/Scripts/asset/jqplot/syntaxhighlighter/styles/shThemejqPlot.min.css" rel="stylesheet" />
<script src="~/Scripts/asset/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/asset/jqplot/jquery.jqplot.min.js" class="include"></script>
<script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="~/Scripts/asset/jqplot/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="~/Scripts/asset/jqplot/excanvas.min.js"></script>
<script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="~/Scripts/asset/jqplot/plugins/jqplot.pointLabels.min.js"></script>
Html代碼
<div id="chart1" class="box"></div>
Javascript腳本:
var chartBar = function () {
var data={param1:param1,param2:param2};//傳遞參數(shù)
$("#chart1").html("");//繪圖DIV
var s1;
$.ajax({
type: "POST",
url: '../Home/AccountSum',
data: data,
datatype: "json",
async: false,
success: function (d) {
if (d.flag) {
s1 = [parseFloat(d.data.Total1), parseFloat(d.data.Total2), parseFloat(d.data.Total3), parseFloat(d.data.Total4), parseFloat(d.data.Total5), parseFloat(d.data.Total6)];
} else {
s1 = [0.00, 0.00, 0.00, 0.00, 0.00, 0.00];
}
$.jqplot.config.enablePlugins = true;
var ticks = ['充值', '提款', '應(yīng)收', '銷售', '退票', '驗證'];
var plot1 = $.jqplot('chart1', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
//animate: !$.jqplot.use_excanvas,
seriesDefaults: {
pointLabels: { show: true },
shadow: false,
showMarker: true, // 是否強調(diào)顯示圖中的數(shù)據(jù)節(jié)點
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 50,
barMargin: 50
}
},
axes: {
xaxis: {
show: true, //是否自動顯示坐標(biāo)軸
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
showTicks: true, // 是否顯示刻度線以及坐標(biāo)軸上的刻度值
showTickMarks: true, //設(shè)置是否顯示刻度
tickOptions: {
show: true,
fontSize: '14px',
fontFamily: 'tahoma,arial,"Hiragino Sans GB",宋體b8b體,sans-serif',
showLabel: true, //是否顯示刻度線以及坐標(biāo)軸上的刻度值
showMark: false,//設(shè)置是否顯示刻度
showGridline: false // 是否在圖表區(qū)域顯示刻度值方向的網(wǎng)格
}
},
yaxis: {
show: true,
showTicks: false, // 是否顯示刻度線以及坐標(biāo)軸上的刻度值
showTickMarks: false, //設(shè)置是否顯示刻度
autoscale: true,
borderWidth: 1,
tickOptions: {
show: true,
showLabel: false,
showMark: false,
showGridline: true,
formatString: '¥%.2f'
}
},
},
grid: {
drawGridLines: true,
drawBorder: false,
shadow: false,
borderColor: '#000000', // 設(shè)置圖表的(最外側(cè))邊框的顏色
borderWidth: 1 //設(shè)置圖表的(最外側(cè))邊框?qū)挾?nbsp;
},
highlighter: { show: false }
});
},
error: function () {
alert("獲取圖形統(tǒng)計數(shù)據(jù)失敗!");
}
});
};
效果圖:
今天就寫到這里吧,初步看了一下官方上的事例,功能還是蠻強大的,使用也很方便、容易,根據(jù)本項目的需求,后續(xù)可能還會增加一些。不過在使用過程中也發(fā)現(xiàn)了一些問題,部分實現(xiàn)不一定可以滿足。
- jQuery插件FusionCharts繪制2D雙折線圖效果示例【附demo源碼】
- jQuery插件FusionCharts繪制的2D雙面積圖效果示例【附demo源碼】
- jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果示例【附demo源碼】
- jQuery插件FusionCharts繪制2D環(huán)餅圖效果示例【附demo源碼】
- jQuery插件FusionCharts繪制的2D帕累托圖效果示例【附demo源碼】
- jQuery插件FusionCharts實現(xiàn)的MSBar2D圖效果示例【附demo源碼】
- jQuery插件FusionCharts繪制ScrollColumn2D圖效果示例【附demo源碼下載】
- jQuery插件FusionCharts實現(xiàn)的2D面積圖效果示例【附demo源碼下載】
- jQuery插件FusionCharts實現(xiàn)的2D柱狀圖效果示例【附demo源碼下載】
- jQuery插件FusionCharts實現(xiàn)的2D餅狀圖效果【附demo源碼下載】
- jQuery插件ImageDrawer.js實現(xiàn)動態(tài)繪制圖片動畫(附源碼下載)
- jQuery插件FusionCharts繪制的2D雙柱狀圖效果示例【附demo源碼】
相關(guān)文章
使用jquery提交form表單并自定義action的實現(xiàn)代碼
下面小編就為大家?guī)硪黄褂胘query提交form表單并自定義action的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05jQuery實現(xiàn)動態(tài)添加節(jié)點與遍歷節(jié)點功能示例
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加節(jié)點與遍歷節(jié)點功能,結(jié)合實例形式分析了jQuery針對頁面元素節(jié)點元素的動態(tài)添加與遍歷相關(guān)操作技巧,需要的朋友可以參考下2017-11-11詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹
這篇文章主要介紹了詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹 ,具有一定的參考價值,有興趣的可以了解一下。2017-01-01jquery實現(xiàn)鼠標(biāo)拖拽滑動效果來選擇數(shù)字的方法
這篇文章主要介紹了jquery實現(xiàn)鼠標(biāo)拖拽滑動效果來選擇數(shù)字的方法,涉及jQuery鼠標(biāo)事件的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05