中文XML论坛--[原创]SVG柱状图[histogram]代码生成器

贴子主题： [原创]SVG柱状图[histogram]代码生成器

本主题类别:

迟到的文章，其实早在9月中旬已经完成，只是忙于复习迎考，忘记贴到BLOG上了，今天翻阅U盘上的旧代码，发现本代码还没有贴上，补上。

自定义半径、颜色功能暂还没有来得及去实现，感兴趣的朋友可以补上去。

效果图：

SVG源码：http://blogger.org.cn/blog/uploadfile/2008111523294383.RAR

<?xml version="1.0" encoding="utf-8"?>
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
    <head>
        <title>SVG柱状图[histogram]代码生成器</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
        function Histogram(data){
            if(data==""){
                alert("请输入数据！");
                document.getElementById("data").focus();
                return;
            }

var width = 1024;
var height = 500;

            var data = data.split(",");
            var len = data.length;
            var maxVal = 0;
            var sumVal = 0;

            for(var i=0;i<len;i++){
                data[i] = parseInt(data[i]);
                maxVal = (maxVal > data[i])?maxVal:data[i];
                sumVal += data[i];
            }

var multiple = height/maxVal;

var radius = width/(len*2+1);

var str = "";

            for(var i=0;i<len;i++){
                R = Math.round(Math.random()*255);
                G = Math.round(Math.random()*255);
                B = Math.round(Math.random()*255);
                fill = "rgb(" + R + "," + G + "," + B + ")";
                str += "\t\t\<g fill=\""+fill+"\"\>\n";
                str += "\t\t\t\<rect x=\"" + (radius + (width - len*radius*2)/2 + i*radius*2) + "\" y=\"" + (height/2 + maxVal/2*multiple - data[i]*multiple + 50) + "\" width=\""+ radius + "\" height=\"" +data[i]*multiple+ "\" fill=\"" + fill + "\"/>\n";
                str += "\t\t\t\<text x=\"" + (radius*1.25 + (width - len*radius*2)/2 + i*radius*2) + "\" y=\"" + (height/2 + maxVal/2*multiple - data[i]*multiple + 45) + "\">"+Math.round((data[i]/sumVal)*10000)/100+"%"+"\<\/text\>\n";
                str += "\t\t\t\<text x=\"" + (radius*1.5 + (width - len*radius*2)/2 + i*radius*2) + "\" y=\"" + 570 + "\" text-anchor=\"middle\"\>"+data[i]+"\<\/text\>\n";
                str += "\t\t\t\<path d=\"M " + (radius + (width - len*radius*2)/2 + i*radius*2) + " " + (height/2 + maxVal/2*multiple - data[i]*multiple + 50) +" L "+ (radius + (width - len*radius*2)/2 + i*radius*2 + radius) +" "+ (height/2 + maxVal/2*multiple - data[i]*multiple + 50) +" L "+(radius + (width - len*radius*2)/2 + i*radius*2 + radius) +" "+ 570 +" L "+ (radius + (width - len*radius*2)/2 + i*radius*2) +" "+570+" Z\" fill=\"url(#cylinder)\" stroke-width=\"0\" \/\>\n";
                str += "\t\t\<\/g\>\n";
            }

            var headstr = "\<?xml version=\"1.0\" encoding=\"UTF-8\"?\>\n";
            headstr += "\<svg\n";
            headstr += "   xmlns\:svg=\"http\:\/\/www.w3.org\/2000\/svg\"\n";
            headstr += "   xmlns=\"http\:\/\/www.w3.org\/2000\/svg\"\n";
            headstr += "   xmlns\:xlink=\"http\:\/\/www.w3.org\/1999\/xlink\"\n";
            headstr += "   xml\:space=\"default\"\n";
            headstr += "   version=\"1.1\"\n";
            headstr += "   width=\"100%\"\n";
            headstr += "   height=\"100%\" viewBox=\"0 0 1024 600\"\>\n";
            headstr += "    \<defs\>\n";

            headstr += "\t\t\<linearGradient id=\"background\" x1=\"0\" y1=\"1\" x2=\"0\" y2=\"0\"\>\n";
            headstr += "\t\t\t\<stop offset=\"0\" stop-color=\"white\"/>\n";
            headstr += "\t\t\t\<stop offset=\"1\" stop-color=\"blue\"\/\>\n";
            headstr += "\t\t\<\/linearGradient\>\n";

            headstr += "\t\t\<linearGradient id=\"cylinder\" gradientUnits=\"objectBoundingBox\"\>\n";
            headstr += "\t\t\t\<stop offset=\"0%\" stop-color=\"white\" stop-opacity=\"0.3\"\/\>\n";
            headstr += "\t\t\t\<stop offset=\"10%\" stop-color=\"white\" stop-opacity=\"0.1\"\/\>\n";
            headstr += "\t\t\t\<stop offset=\"20%\" stop-color=\"white\" stop-opacity=\"0.2\"\/\>\n";
            headstr += "\t\t\t\<stop offset=\"30%\" stop-color=\"white\" stop-opacity=\"0.5\"\/\>\n";
            headstr += "\t\t\t\<stop offset=\"50%\" stop-color=\"white\" stop-opacity=\"0.2\"\/\>\n";
            headstr += "\t\t\t\<stop offset=\"100%\" stop-color=\"white\" stop-opacity=\"0\"\/\>\n";
            headstr += "\t\t\</linearGradient\>\n";

            headstr += "    \<\/defs\>\n";
            headstr += "\t\<g stroke-width=\"0\" stroke=\"black\"\>\n";
            headstr += "\t\t\<rect x=\"10\" y=\"10\" width=\"1004\" height=\"580\" fill=\"url(#background)\" stroke-width=\"2\" stroke=\"gray\"\/\>\n";

var footstr = "\t\<\/g\>\n\<\/svg\>";

            document.getElementById("code").value=headstr+str+footstr;
        }
        </script>
    </head>
<body>
<h1 style="color:#e00">SVG柱状图[histogram]代码生成器</h1>
<div>
半径：
<input id="radius" width="25px"/>
</div>
<div>
颜色：
<textarea id="color" style="width:600px;height:23px"></textarea>
</div>
<div>
数据：
<textarea id="data" style="width:600px;height:23px">135,55,60,100,80,90,30,80</textarea>
</div>
<input type="button" value="Histogram" onclick="javascript:Histogram(data.value)"/>
<textarea id="code" style="width:100%;height:50%"></textarea>
</body>
</html>


	W 3 C h i n a ( since 2003 ) 旗下站点苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》	109.375ms