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

復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>無標(biāo)題頁</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繪制圓餅圖表的簡單實(shí)例
- 使用Chart.js圖表庫制作漂亮的響應(yīng)式表單
- JavaScript可視化圖表庫D3.js API中文參考
- javascript使用smipleChart實(shí)現(xiàn)簡單圖表
- 淺析jquery的js圖表組件highcharts
- JSP FusionCharts Free顯示圖表 具體實(shí)現(xiàn)
- javaScript矢量圖表庫-gRaphael幾行代碼實(shí)現(xiàn)精美的條形圖/餅圖/點(diǎn)圖/曲線圖
- 純JAVASCRIPT圖表動畫插件Highcharts Examples
- javascript實(shí)現(xiàn)的柱狀統(tǒng)計(jì)圖表
- JavaScript制作簡單的框選圖表
相關(guān)文章
jQuery計(jì)算文本框字?jǐn)?shù)及限制文本框字?jǐn)?shù)的方法
一個(gè)中文算兩個(gè),一個(gè)符號或數(shù)字,英文,算一個(gè)。(如果是規(guī)定140個(gè)字,乘以2,那么就是280個(gè))。需要用到Math.ceil方法,因?yàn)樽詈筮€是要除以2來還原顯示給用戶的字?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 中,可以對每一個(gè) DOM 對象保存私有的數(shù)據(jù)。2010-08-08jquery寫個(gè)checkbox——類似郵箱全選功能
最近在學(xué)習(xí)jquery,今天抽空用jquery寫個(gè)checkbox——類似郵箱全選功能,感興趣的你可以參考下哈,希望可以幫助到你2013-03-03jQuery插件DataTables分頁開發(fā)心得體會
這篇文章主要為大家分享了jQuery插件DataTables分頁開發(fā)心得體會,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08