最近做项目要用到sparkiine。 http://omnipotent.net/jquery.sparkline/#s-about
但是下面的这样图，做不出来。
我想问，如果jquery做得出吗？ 做不出的有其他方法吗？
基本就是设置数据一，根据数值大小显示长短不一的渐进色长条。
二，根据给定的几个(不定，任意个)数值，作出分段的长条。
但是下面的这样图，做不出来。
我想问，如果jquery做得出吗？ 做不出的有其他方法吗？
基本就是设置数据一，根据数值大小显示长短不一的渐进色长条。
二，根据给定的几个(不定，任意个)数值，作出分段的长条。
div{
height:20px;;
float:left;}
</style>
<script type="text/javascript">
function shows(){
var a=document.getElementById("test");
var p=a.parentNode;
var reg=/[^\d]+/;
var nums=a.value.split(reg);
var colors=["yellow","black","blue","red","pink","#F00F12"];
for(var i=0;i<nums.length;i++){
var div=document.createElement("div");
div.style.width=+nums[i]+"px";
div.style.backgroundColor=colors[i];
document.body.appendChild(div);
}
p.removeChild(a);
}
</script>
</head><body>
<input type="text" id="test" onblur="shows()">
</body>
第二个的话用div试试
div.style.backgroundColor=colors[i%colors.length];
试试
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Page</title>
<style type="text/css">
body{width:100%;height:100%;}
.divNum{height:25;margin:0 ;padding:0;text-align:right;}
.divBgColor{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ff0000,endColorStr=#ffffff);/*IE6*/
background:-moz-linear-gradient(left,#ff0000,#ffffff);/*非IE6的其它*/
background:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#ff0000), to(#ffffff));/*非IE6的其它*/
}
</style>
</head>
<body>
<div style="width:600px; height:auto; line-height:25px; margin:50px auto; border:1px solid #eee; padding:20px" id="divContorl"></div></body>
<script type="text/javascript">
var colors=['red','green','yellow','blue','#eee'];
var divContorl = document.getElementById("divContorl");
var maxLength = 500;
function CreateDdivNum1(nums)
{
if(!nums || !nums.length)return;
var maxNum = GetMax(nums);
for(var i=0;i<nums.length;i++)
{
var div = document.createElement("div");
div.className="divNum divBgColor";
div.style.width=(maxLength * nums[i]/maxNum)+"px";
div.innerHTML=nums[i];
divContorl.appendChild(div);
}
}
function CreateDdivNum2(nums)
{
if(!nums || !nums.length)return;
var sum = GetSum(nums);
var divParent = document.createElement("div");
divParent.style.width=(maxLength)+"px";
divParent.style.marginTop="20px";
for(var i=0;i<nums.length;i++)
{
var div = document.createElement("div");
div.className="divNum";
div.style.cssText="float:left;width:"+(maxLength * nums[i]/sum)+"px;background-color:"+colors[i];
div.innerHTML=nums[i];
divParent.appendChild(div);
}
divContorl.appendChild(divParent);
var div=document.createElement("div");
div.style.cssText="clear:both;";
divContorl.appendChild(div);
}
function GetMax(nums)
{
if(!nums || !nums.length)return 0;
var num=nums[0];
for(var i=1;i<nums.length;i++)
{
if(nums[i]>num){ num=nums[i];}
}
return num;
}
function GetSum(nums)
{
if(!nums || !nums.length)return 0;
var num=0;
for(var i=0;i<nums.length;i++)
{
num+=nums[i];
}
return num;
}
CreateDdivNum1([300,400,500,600]);
CreateDdivNum2([300,400,500,600]);
CreateDdivNum2([100,200,300,400]);
</script>
</html>
不行自己找几个渐变色码,多个DIV设宽度背景填充,渐变跨度粗糙还好,如果太长又要渐变精细那是会悲剧的,各种卡.
谢谢，4楼。 有个不是什么大问题，chrome显示的结果，稍微有点不一样。
上面那种图，不是颜色左右渐进而是上下渐进了。IE和Firefox都是对的。
修改一下css:
background:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#ff0000), to(#ffffff));