通过xslt制作统计图

今天突然兴起写了这个xslt,主要的制作功能在我原来的文章

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

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

如下是效果图

xmlchart.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v
>
<
head
>
<
title></title
>
<
meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1
">
<
meta name
=ProgId content=VisualStudio.HTML>
<
meta name=Originator content="Microsoft Visual Studio .NET 7.1
">
<
style
>
v/:* { BEHAVIOR: url(#default#VML)
</style
>
<
script
>
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
>
<
input onclick="getxml()" value="生成" type ="button
">
<
div id="result
">
</
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) "/>&#160; <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>

 

阅读终点,创作起航,您可以撰写心得或摘录文章要点写篇博文。去创作
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
XSLT中,确实没有内置的split函数来分割字符串。但是你可以使用递归和substring函数来实现类似的功能。下面是一个示例代码,展示了如何在XSLT中实现一个简单的split函数: ``` <xsl:template name="split"> <xsl:param name="input" /> <xsl:param name="delimiter" select="','" /> <xsl:choose> <xsl:when test="contains($input, $delimiter)"> <xsl:value-of select="substring-before($input, $delimiter)" /> <xsl:text> </xsl:text> <xsl:call-template name="split"> <xsl:with-param name="input" select="substring-after($input, $delimiter)" /> <xsl:with-param name="delimiter" select="$delimiter" /> </xsl:call-template> </xsl:when> <xsl:otherwise> <xsl:value-of select="$input" /> <xsl:text> </xsl:text> </xsl:otherwise> </xsl:choose> </xsl:template> ``` 这个模板将接受两个参数:input和delimiter。它会逐个输出input中使用delimiter分隔的部分,并在每个部分后面添加一个换行符。 你可以在需要的地方调用这个模板,传递对应的参数来实现你的需求。比如,你可以在你的XSLT文档的某个模板中这样使用它: ``` <xsl:call-template name="split"> <xsl:with-param name="input" select="'ItemA,ItemB,ItemC'" /> <xsl:with-param name="delimiter" select="','" /> </xsl:call-template> ``` 这样,将会以换行符分隔的形式输出"ItemA"、"ItemB"和"ItemC"。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [在xslt中实现split方法对查询字符串进行分隔](https://blog.csdn.net/ddjq1044/article/details/101340306)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [利用xslt对xml中数据实现splite换行的总结](https://blog.csdn.net/gaotong2055/article/details/84128994)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liuruhong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值