【JQuery】Jqplot–長條圖
使用JQuery前，需要引用Jquery元件及jqplot相關元件，不同的圖表所需引用的.JS檔不同，詳情請參照jqplot官網範本，本篇介紹以長條圖為例。
檔案引用（僅供參考）︰
<script type="text/javascript" src="inc/jquery-1.4.3.min.js"></script>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="inc/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="inc/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="inc/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="inc/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="inc/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" href="inc/jquery.jqplot.min.css" />
HTML 頁面（參考）︰
<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px;"></div>
Javascript︰
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var s1 = [2, 6, 7, 10]; //Y軸資料
var ticks = ['a', 'b', 'c', 'd']; //X軸資料
plot1 = $.jqplot('chart1', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
highlighter: { show: false }
});
});
執行畫面︰
參考資源︰
jqplot官網
留言
張貼留言