通过xslt制作统计图

通过xslt制作统计图今天突然兴起写了这个xslt，主要的制作功能在我原来的文章

利用vml制作统计图全攻略----饼图的制作

这个里头详细介绍了如何使用VML来制作统计饼图，而本文的代码只是通过xslt的形式完成，因为时间原因，我只是简单的贴出代码，运行环境需要msxml3.0以上版本

如下是效果图

xmlchart.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<head>

<style>

v\:* { BEHAVIOR: url(#default#VML)

</style>

function getxml(){

var xmlDoc=new ActiveXObject("MSXML2.FreeThreadedDOMDocument");

xmlDoc.load("chartdata.xml");

var xslDoc=new ActiveXObject("MSXML2.FreeThreadedDOMDocument");

xslDoc.load("VMLChart.xslt");

var template=new ActiveXObject("MSXML2.XSLTemplate");

template.stylesheet=xslDoc;

var proc=template.createProcessor();

proc.input=xmlDoc;

proc.addParameter("Caption","测试图表");

proc.addParameter("Width",600);

proc.addParameter("Height",450);

proc.addParameter("BackgroundColor","#e6e6e6");

proc.addParameter("Shadow","on");

proc.transform();

var strResult=proc.output;

result.innerHTML=strResult;

}

</script>

</head>

<body>

</div>

</body>

</html>

数据文件

<?xml version="1.0" encoding="gb2312" ?><root><DataItem name="北京" value ="23" title="北京的人口"/><DataItem name="上海" value="49" title="上海的人口"/><DataItem name="成都" value="89" title="成都的人口"/><DataItem name="天津" value="36" title="天津的人口"/><DataItem name="武汉" value="15" title="武汉的人口"/><DataItem name="西安" value="57" title="西安的人口"/><DataItem name="d安" value="57" title="西安的人口"/><DataItem name="a安" value="57" title="西安的人口"/></root>

样式转换单

<?xml version="1.0" encoding="gb2312" ?><xsl:stylesheet xmlns:VMLObject="http://blueswing.vicp.net" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"><xsl:output method="html"/><xsl:param name="Caption"/><xsl:param name="Width"/><xsl:param name="Height"/><xsl:param name="Shadow"/><xsl:param name="BorderWidth"/><xsl:param name="BorderColor"/><xsl:param name="BackgroundColor"/><msxsl:script language="javascript" implements-prefix="VMLObject"><![CDATA[var curValue=0;var preColor=0;var mX=Math.pow(2,16) * 360;function startAngle(vValue){var preValue=curValue;curValue+=vValue;return parseInt(mX * preValue);}function endAngle(vValue){return parseInt(mX * vValue);}function randomColor(){preColor= "rgb("+ parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255) +"," +parseInt( Math.random() * 255)+")";return preColor;}function curColor(){return preColor;}]]></msxsl:script><xsl:template match="/"><xsl:variable name="PieValueTotal" select="sum(//DataItem/@value)"/><xsl:variable name="PieCount" select="count(//DataItem)"/><v:group coordsize="21600,21600"><xsl:attribute name="style">width:<xsl:value-of select="$Width"/>px;height:<xsl:value-of select="$Height"/>px</xsl:attribute><v:rect style="width:21600px;height:21600px"><xsl:if test="$BorderWidth"><xsl:attribute name="strokeweight"><xsl:value-of select="$BorderWidth"/></xsl:attribute></xsl:if><xsl:if test="$BorderColor"><xsl:attribute name="strokecolor"><xsl:value-of select="$BorderColor"/></xsl:attribute></xsl:if><xsl:if test="$BackgroundColor"><xsl:attribute name="fillcolor"><xsl:value-of select="$BackgroundColor"/></xsl:attribute></xsl:if><v:textbox style="text-Align:center;font-size:24px;font-Weight:bold;height:24px"><xsl:value-of select="$Caption"/></v:textbox><xsl:if test="$Shadow"><v:shadow on="t"/></xsl:if></v:rect><xsl:for-each select="//DataItem"><v:shape style="width:15000px;height:14000px;top:4000px;left:1000px" adj="0,0" strokecolor="window" coordsize="1500,1400"><xsl:attribute name="path">M 750 700 AE 750 700 750 700 <xsl:value-of select="VMLObject:startAngle(@value div $PieValueTotal) "/>  <xsl:value-of select="VMLObject:endAngle(@value div $PieValueTotal)"/> xe</xsl:attribute><xsl:attribute name="fillcolor"><xsl:value-of select="VMLObject:randomColor()"/></xsl:attribute><xsl:attribute name="title"><xsl:value-of select="@title"/></xsl:attribute></v:shape><v:rect><xsl:attribute name="style">left:17000px;width:600px;height:800px;top:<xsl:value-of select="1200 * position() + 1000"/>px</xsl:attribute><xsl:attribute name="fillcolor"><xsl:value-of select="VMLObject:curColor()"/></xsl:attribute></v:rect><v:rect strokecolor="black"><xsl:attribute name="style">left:17500px;top:<xsl:value-of select="1200 * position() + 1000"/>px</xsl:attribute><v:textbox style="font:caption"><xsl:value-of select="@name"/>(<xsl:value-of select="@value"/>)</v:textbox></v:rect></xsl:for-each></v:group></xsl:template></xsl:stylesheet>