其实就是随机数的应用了,一楼的取随机数已经相当完善。扩展一下,结果大概如下,不但数据变化,而且颜色也变化,四个颜色,对应四条边框,挺好玩的:
代码如下:
<!DOCTYPE html><html>
<head>
<meta http-equiv="content-type" content="text/htmlcharset=utf-8">
<style>
body{text-align:centercolor:#00F}
div{border:15px solid #DDDmargin-bottom:5px}
</style>
</head>
<body>
<div id='test0'>1</div>
<div id='test1'>2</div>
<div id='test2'>3</div>
<div id='test3'>4</div>
<div id='test4'>5</div>
<div id='test5'>6</div>
<div id='test6'>7</div>
<br />
<input type='button' id='btn' value='换一组看看' />
<script>
<!--
//换一组按钮事件
var btn=document.getElementById('btn')
btn.onclick=function(){fillData()}
var lineChartData={
labels:["january",'Feb'],
datasets:[],//这里只需要空数组就行了,反正加载的时候要清空掉的。
otherData:[]
}
//以下代码直接贴到你的文件内,应该能管用。
//获取从from 到to 的随机整数
function rand(min,max){
return min+parseInt((max-min)*Math.random())
}
//随机rgba颜色值
function rgbaStr(){
return "rgba("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")"
}
//随机rgb颜色缩写值
function rgbaStr(){
var v='0123456789ABCDEF'
return "#"+v.substr(rand(0,15),1)+v.substr(rand(0,15),1)+v.substr(rand(0,15),1)
}
//填充随机数据
function fillData(){
lineChartData.datasets=[]//清空原来的
for(var i=0i<7i++){
lineChartData.datasets.push({
fillColor:rgbaStr(),
strokeColor:rgbaStr(),
pointColor:rgbaStr(),
pointStrokeColor:rgbaStr(),
//随机的数据,应该是你需要的那一部份了。
data:[rand(0,100),rand(0,100),rand(0,100),rand(0,100),rand(0,100),rand(0,100),rand(0,100)]
})
}
//展示数据,直接填充div的四个边的颜色。
for(i in lineChartData.datasets){
var div=document.getElementById('test'+i)
div.style.borderTopColor =lineChartData.datasets[i].fillColor
div.style.borderLeftColor =lineChartData.datasets[i].strokeColor
div.style.borderBottomColor =lineChartData.datasets[i].pointColor
div.style.borderRightColor =lineChartData.datasets[i].pointStrokeColor
div.innerHTML =' data:'+lineChartData.datasets[i].data.join(' , ')
}
}
fillData()//加载完成就填充数据
-->
</script>
</body>
</html>