javascript如何做的这样的图？

2012-09-18

javascript怎么做的这样的图？？？最近做项目要用到sparkiine。 http://omnipotent.net/jquery.sparkline/#s-a

javascript怎么做的这样的图？？？
最近做项目要用到sparkiine。 http://omnipotent.net/jquery.sparkline/#s-about
但是下面的这样图，做不出来。
我想问，如果jquery做得出吗？做不出的有其他方法吗？
基本就是设置数据

一，根据数值大小显示长短不一的渐进色长条。
二，根据给定的几个(不定，任意个)数值，作出分段的长条。

[解决办法]
<style type="text/css">
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 code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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，并设置div的颜色，百分比，宽度等信息。
[解决办法]
Jquery有插件,找找.
不行自己找几个渐变色码,多个DIV设宽度背景填充,渐变跨度粗糙还好,如果太长又要渐变精细那是会悲剧的,各种卡.

热点排行

JavaScript

javascript如何做的这样的图？