圖標插件--jqplot實現柱狀圖及餅圖，表盤圖演示樣例

阿新 • • 發佈：2017-07-30

itl nbsp left 柱狀圖 draw ted ner ann name

柱狀圖

在jqPlot圖表插件使用說明（一）中，我們已經能夠通過jqPlot繪制出比較簡單的線形圖。通過查看源碼。我們也能夠看出，線形圖是jqPlot默認的圖表類型：
[javascript] view plaincopy

/**
* Class: Series
* An individual data series object. Cannot be instantiated directly, but created
* by the Plot oject. Series properties can be set or overriden by the
* options passed in from the user.
*/
function Series(options) {
// ...其他設置
// prop: renderer
// A class of a renderer which will draw the series,
// see <$.jqplot.LineRenderer>.
this.renderer = $.jqplot.LineRenderer;
// ...其他設置
}

由上面的源代碼也能夠看出，jqPlot在設置圖表類型時，用到了renderer屬性。這個屬性是為圖表的數據序列設置一個渲染器，渲染器決定怎樣渲染圖表的數據序列。因此，相應於最簡單的線形圖，我們僅僅須要設置相應的數據序列渲染器，就能夠繪制出最簡單的柱狀圖。完整源代碼例如以下：
[html]

view plaincopy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>最簡單的柱狀圖</title>
<link rel="stylesheet" type="text/css" href="js/jqPlot/1.0.4/jquery.jqplot.min.css"/>
<!--[if lt IE 9]>
<script language="javascript" type="text/javascript" src="js/jqPlot/1.0.4/excanvas.js"></script>
<![endif]-->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.barRenderer.min.js" type="text/javascript" ></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$.jqplot(‘chart1‘, [[75, 62, 96, 81, 77, 83, 70]], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer // 設置數據序列渲染器
}
});
});
</script>
</head>
<body>
<div id="chart1" style="width: 800px;height: 400px;">
<!--
描寫敘述：圖表展示區域
-->
</div>
</body>
</html>

來看一下效果圖：

配置柱狀圖

由最簡單的線形圖加上一些設置後，能夠使圖表豐富起來。

相同的。柱狀圖也能夠做一些配置。並且配置的方式與線形圖差點兒沒有區別。

再來看一個演示樣例：
[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>給柱狀圖配置屬性</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"></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.barRenderer.min.js" type="text/javascript" ></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript" ></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.highlighter.min.js" type="text/javascript"></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$.jqplot(‘chart1‘, [[75, 62, 96, 81], [46, 82, 70, 92], [58, 33, 82, 88]], {
title:{ // 標題屬性
text:‘<div class="chart-title">2013年各季度廣告位投放數量對照圖（非真實數據）<div>‘,// 標題文本
show:true, // 是否陰影
fontFamily:‘微軟雅黑‘, // 標題字體
fontSize:14, // 標題字體大小
textAlign:‘left‘, // 標題對齊方式
textColor:‘#515151‘, // 標題顏色（也能夠寫作屬性color）
escapeHtml:false // 是否轉義HTML字符，值為false時，能夠在text屬性中使用HTML代碼
},
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { // 顯示數據點，依賴於jqplot.pointLabels.min.js文件
show: true
},
showLabel:true
},
series:[ // 詳細數據序列屬性
{
color:‘#FF6666‘,
label:‘CPC‘
},{
color:‘#0066CC‘,
label:‘CPT‘
},{
color:‘#99CC66‘,
label:‘CPM‘
}
],
axesDefaults:{ // 默認坐標軸屬性
min:0,
tickOptions:{
showMark:false
}
},
axes:{ // 詳細坐標軸屬性
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
ticks:[‘第一季度‘, ‘第二季度‘, ‘第三季度‘, ‘第四季度‘],
label:‘季度‘
},
yaxis: {
label: ‘投放數量‘
}
},
legend:{ // 圖例屬性
show:true,
placement: ‘outsideGrid‘ // 設置圖例位於圖表外部
}
});
});
</script>
</head>
<body>
<div id="chart1" style="width: 800px;height: 400px;">
<!--
描寫敘述：圖表展示區域
-->
</div>
</body>
</html>

效果例如以下：

其他圖表類型

圖表一般用於展示統計數據結果。提升數據可讀性。

圖表能夠分為非常多種類型，不同的類型展示的效果不一樣。比方線形圖的數據以一條曲線展示，而柱狀圖的數據則以多個柱形展示。不同類型的圖表用途也有差別。線形圖顯然適合展示數據的變化趨勢，柱狀圖則適合用於對數據進行對照，還有餅狀圖適合觀察不同選項占比，等等。

通過對線形圖和柱狀圖的學習，我們能夠聯想到。不同類型的圖表，在jqPlot中。最大的差異在於渲染器。通過不同的渲染器，我們就能得到不同的展示效果。當然，它們之間也會有一些不同的配置。只是我們都能夠通過文檔或源代碼去查看該怎樣配置一個圖表。

以下是一些比較經常使用的圖表類型及演示樣例代碼。

餅狀圖。餅狀圖相應的數據序列渲染器為$.jqplot.PieRenderer。與線形圖、柱狀圖不同的是，餅狀圖的數據格式是一個三維數組。

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>餅狀圖</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="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.pieRenderer.min.js" type="text/javascript" ></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$.jqplot(‘chart1‘, [[[‘活多‘, 31], [‘錢少‘, 92], [‘家遠‘, 50], [‘位低‘, 40], [‘權輕‘, 44], [‘任重‘, 66]]], {
title:{ // 標題屬性
text:‘<div class="chart-title">不想上班的理由<div>‘,// 標題文本
show:true, // 是否陰影
fontFamily:‘微軟雅黑‘, // 標題字體
fontSize:14, // 標題字體大小
textAlign:‘left‘, // 標題對齊方式
textColor:‘#515151‘, // 標題顏色（也能夠寫作屬性color）
escapeHtml:false // 是否轉義HTML字符。值為false時。能夠在text屬性中使用HTML代碼
},
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions:{
showDataLabels:true
},
pointLabels: { // 顯示數據點。依賴於jqplot.pointLabels.min.js文件
show: true
}
},
grid:{
drawBorder:false,
shadow:false,
background:‘transparent‘
},
legend:{ // 圖例屬性
show:true,
placement: ‘outsideGrid‘ // 設置圖例位於圖表外部
}
});
});
</script>
</head>
<body>
<div id="chart1" style="width: 400px;height: 400px;">
<!--
描寫敘述：圖表展示區域
-->
</div>
</body>
</html>

效果圖：

環形圖。環形圖與餅狀圖的差別僅僅是在於渲染器的不同。僅僅須要將與餅狀圖渲染器有關的代碼。改動為環形圖相應的渲染器代碼。就能夠將一個餅狀圖轉變為環形圖。環形圖渲染器為$.jqplot.DonutRenderer，以下是完整的環形圖演示樣例代碼：

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>環形圖</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="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.donutRenderer.min.js" type="text/javascript" ></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$.jqplot(‘chart1‘, [[[‘活多‘, 31], [‘錢少‘, 92], [‘家遠‘, 50], [‘位低‘, 40], [‘權輕‘, 44], [‘任重‘, 66]]], {
title:{ // 標題屬性
text:‘<div class="chart-title">不想上班的理由<div>‘,// 標題文本
show:true, // 是否陰影
fontFamily:‘微軟雅黑‘, // 標題字體
fontSize:14, // 標題字體大小
textAlign:‘left‘, // 標題對齊方式
textColor:‘#515151‘, // 標題顏色（也能夠寫作屬性color）
escapeHtml:false // 是否轉義HTML字符，值為false時，能夠在text屬性中使用HTML代碼
},
seriesDefaults:{
renderer:$.jqplot.DonutRenderer,
rendererOptions:{
showDataLabels:true
},
pointLabels: { // 顯示數據點，依賴於jqplot.pointLabels.min.js文件
show: true
}
},
grid:{
drawBorder:false,
shadow:false,
background:‘transparent‘
},
legend:{ // 圖例屬性
show:true,
placement: ‘outsideGrid‘ // 設置圖例位於圖表外部
}
});
});
</script>
</head>
<body>
<div id="chart1" style="width: 400px;height: 400px;">
<!--
描寫敘述：圖表展示區域
-->
</div>
</body>
</html>

效果圖：

儀表盤。
儀表盤的數據序列僅僅有一個數值，用於指示指針所在位置。儀表盤數據序列的渲染器位於jqplot.meterGaugeRenderer.min.js文件裏，為$.jqplot.MeterGaugeRenderer。來看完整的儀表盤圖表代碼：

[html] view plaincopy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>儀表盤</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="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jqPlot/1.0.4/jquery.jqplot.min.js" type="text/javascript"></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.meterGaugeRenderer.min.js" type="text/javascript" ></script>
<script src="js/jqPlot/1.0.4/plugins/jqplot.pointLabels.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$.jqplot(‘chart1‘, [[75]], {
title:{ // 標題屬性
text:‘<div class="chart-title">當前行駛速度<div>‘,// 標題文本
show:true, // 是否陰影
fontFamily:‘微軟雅黑‘, // 標題字體
fontSize:14, // 標題字體大小
textAlign:‘left‘, // 標題對齊方式
textColor:‘#515151‘, // 標題顏色（也能夠寫作屬性color）
escapeHtml:false // 是否轉義HTML字符，值為false時。能夠在text屬性中使用HTML代碼
},
seriesDefaults:{
renderer: $.jqplot.MeterGaugeRenderer,// 儀表盤渲染器
rendererOptions:{
showDataLabels:true,
min:0,
max:120,
labelHeightAdjust:-5,
ticks: [0, 20, 40, 60, 80, 100, 120],
labelPosition:‘bottom‘,
intervals:[40, 80, 120], //取2,3,4這三個刻度值作為分隔線；該值的取定須參照表盤刻度值範圍而定
intervalColors:[‘#66cc66‘, ‘#E7E658‘, ‘#cc6666‘], //分別為上面分隔的域指定表示的顏色
label: ‘時速：公裏/小時‘
}
},
grid:{
drawBorder:false,
shadow:false,
background:‘transparent‘
}
});
});
</script>
</head>
<body>
<div id="chart1" style="width: 400px;height: 400px;">
<!--
描寫敘述：圖表展示區域
-->
</div>
</body>
</html>

效果圖：

圖標插件--jqplot實現柱狀圖及餅圖，表盤圖演示樣例

itl nbsp left 柱狀圖 draw ted ner ann name 柱狀圖在jqPlot圖表插件使用說明（一）中，我們已經能夠通過jqPlot繪制出比較簡單的線形圖。通過查看源碼。我們也能夠看出，線形圖是jqPlot默認的圖表類型：

圖標插件--jqplot實現柱狀圖及餅圖，表盤圖演示樣例

柱狀圖

配置柱狀圖

其他圖表類型

圖標插件--jqplot實現柱狀圖及餅圖，表盤圖演示樣例

記一個上傳圖片到圖床利器插件的實現（Mac版開源）

實現柱狀圖與條形圖的結合，MPAndroidChart的簡單使用

Echarts實現柱狀圖下鑽功能

echarts實現柱狀圖-附圖 option配置

C#下利用devexpress中chart外掛實現柱狀圖

echarts地圖上實現柱狀圖

Matplotlib庫擴充套件之Seaborn實現柱狀圖和熱力圖

Android 實用hellocharts實現柱狀圖、線狀圖

echarts 實現柱狀圖漸變色

Sublime Text中安裝插件來實現px與rem間的換算

js學習總結----輪播圖的插件化封裝

基於Jquery插件Uploadify實現實時顯示進度條上傳圖片

C#趨勢圖(highcharts插件)

基於bootstrap的上傳插件fileinput實現ajax異步上傳功能(支持多文件上傳預覽拖拽)

js插件zClip實現復制到剪貼板功能

WinForm基於插件開發實現多項配置存儲

微信小程序——自定義圖標組件

EMQ插件組合實現物聯網邊緣平臺的設備通信管理

CSS3 - vue中純css實現柱狀圖表效果

圖標插件--jqplot實現柱狀圖及餅圖，表盤圖演示樣例

柱狀圖

配置柱狀圖

其他圖表類型

相關推薦