javascript怎么做的这样的图？？？

scbb 2012-09-03 08:04:57

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

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

...全文

181 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

hch126163 2012-09-10

打赏
举报

[Quote=引用 8 楼的回复:]

引用 4 楼的回复:

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" >
……
[/Quote]

修改一下css:
background:-webkit-gradient(linear, 0% 0%, 100% 0%, from(#ff0000), to(#ffffff));

scbb 2012-09-05

打赏
举报

[Quote=引用 4 楼的回复:]

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-e……
[/Quote]

谢谢，4楼。有个不是什么大问题，chrome显示的结果，稍微有点不一样。
上面那种图，不是颜色左右渐进而是上下渐进了。

IE和Firefox都是对的。

scbb 2012-09-04

打赏
举报

[Quote=引用 6 楼的回复:]
Jquery有插件,找找.
不行自己找几个渐变色码,多个DIV设宽度背景填充,渐变跨度粗糙还好,如果太长又要渐变精细那是会悲剧的,各种卡.
[/Quote]

什么插件名？？

被偷的香蕉 2012-09-04

打赏
举报

Jquery有插件,找找.
不行自己找几个渐变色码,多个DIV设宽度背景填充,渐变跨度粗糙还好,如果太长又要渐变精细那是会悲剧的,各种卡.

gf05011 2012-09-04

打赏
举报

我理解就是根据多个数值动态生成多个div，并设置div的颜色，百分比，宽度等信息。

hch126163 2012-09-04

打赏
举报





<!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>