javascript如何做的这样的图？
日期：2014-05-16 浏览次数：20357 次
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];
试试
------解决方案--------------------
最近做项目要用到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)
{
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
