jQuery簡(jiǎn)單圖表peity.js使用示例
更新時(shí)間:2014年05月02日 14:07:09 作者:
這篇文章主要介紹了jQuery簡(jiǎn)單圖表peity.js的使用,需要的朋友可以參考下

復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無(wú)標(biāo)題頁(yè)</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="jquery.peity.js"></script>
<script type="text/javascript">
jQuery(function(){
$(".bar-colours-1").peity("bar", {
colours: ["red", "green", "blue"],width: 100,height:100
})
$(".bar-colours-2").peity("bar", {
colours: function(value) {
return value > 0 ? "green" : "red"
},width: 100,height:100
})
$(".bar-colours-3").peity("bar", {
colours: function(_, i, all) {
var g = parseInt((i / all.length) * 255)
return "rgb(255, " + g + ", 0)"
},width: 100,height:100
})
$(".pie-colours-1").peity("pie", {
colours: ["cyan", "magenta", "yellow", "black"],diameter:100
})
$(".pie-colours-2").peity("pie", {
colours: function(_, i, all) {
var g = parseInt((i / all.length) * 255)
return "rgb(255, " + g + ", 0)"
},diameter:100
})
var updatingChart = $(".updating-chart").peity("line", { width: 150,height:50})
setInterval(function() {
var random = Math.round(Math.random() * 10)
var values = updatingChart.text().split(",")
values.shift()
values.push(random)
updatingChart
.text(values.join(","))
.change()
}, 1000)
})
</script>
</head>
<body>
<span class="bar-colours-1">5,3,9,6,5,9,7,3,5,2</span>
<span class="bar-colours-2">5,3,2,-1,-3,-2,2,3,5,2</span>
<span class="bar-colours-3">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
<br />
<span class="pie-colours-1">4,7,6,5</span>
<span class="pie-colours-2">5,3,9,6,5</span>
<br />
<span class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>
</body>
</html>
您可能感興趣的文章:
- html+js+highcharts繪制圓餅圖表的簡(jiǎn)單實(shí)例
- 使用Chart.js圖表庫(kù)制作漂亮的響應(yīng)式表單
- JavaScript可視化圖表庫(kù)D3.js API中文參考
- javascript使用smipleChart實(shí)現(xiàn)簡(jiǎn)單圖表
- 淺析jquery的js圖表組件highcharts
- JSP FusionCharts Free顯示圖表 具體實(shí)現(xiàn)
- javaScript矢量圖表庫(kù)-gRaphael幾行代碼實(shí)現(xiàn)精美的條形圖/餅圖/點(diǎn)圖/曲線(xiàn)圖
- 純JAVASCRIPT圖表動(dòng)畫(huà)插件Highcharts Examples
- javascript實(shí)現(xiàn)的柱狀統(tǒng)計(jì)圖表
- JavaScript制作簡(jiǎn)單的框選圖表
相關(guān)文章
jquery的extend和fn.extend的使用說(shuō)明
jQuery.fn.extend(object); 對(duì)jQuery.prototype進(jìn)得擴(kuò)展,就是為jQuery類(lèi)添加“成員函數(shù)”。jQuery類(lèi)的實(shí)例可以使用這個(gè)“成員函數(shù)”。2011-01-01jQuery計(jì)算文本框字?jǐn)?shù)及限制文本框字?jǐn)?shù)的方法
一個(gè)中文算兩個(gè),一個(gè)符號(hào)或數(shù)字,英文,算一個(gè)。(如果是規(guī)定140個(gè)字,乘以2,那么就是280個(gè))。需要用到Math.ceil方法,因?yàn)樽詈筮€是要除以2來(lái)還原顯示給用戶(hù)的字?jǐn)?shù);2016-03-03jQuery form插件的使用之處理server返回的JSON, XML,HTML數(shù)據(jù)
這篇文章主要介紹了jQuery form插件的使用之處理server返回的JSON, XML,HTML數(shù)據(jù) 的相關(guān)資料,需要的朋友可以參考下2016-01-01jQuery的實(shí)現(xiàn)原理的模擬代碼 -2 數(shù)據(jù)部分
在 jQuery 中,可以對(duì)每一個(gè) DOM 對(duì)象保存私有的數(shù)據(jù)。2010-08-08jquery寫(xiě)個(gè)checkbox——類(lèi)似郵箱全選功能
最近在學(xué)習(xí)jquery,今天抽空用jquery寫(xiě)個(gè)checkbox——類(lèi)似郵箱全選功能,感興趣的你可以參考下哈,希望可以幫助到你2013-03-03jQuery插件DataTables分頁(yè)開(kāi)發(fā)心得體會(huì)
這篇文章主要為大家分享了jQuery插件DataTables分頁(yè)開(kāi)發(fā)心得體會(huì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08