jQuery简单图表peity.js使用示例_Javascript教程-查字典教程网
jQuery简单图表peity.js使用示例
jQuery简单图表peity.js使用示例
发布时间:2017-01-14 来源:查字典编辑
摘要:复制代码代码如下:无标题页jQuery(function(){$(".bar-colours-1").peity("bar",{colour...

复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>无标题页</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>5,3,9,6,5,9,7,3,5,2</span>

<span>5,3,2,-1,-3,-2,2,3,5,2</span>

<span>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>

<br />

<span>4,7,6,5</span>

<span>5,3,9,6,5</span>

<br />

<span>5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>

</body>

</html>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类