Question

我遇到了一个问题，需要我将xml中的元素传递给xslt文件中的javascript函数。

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="graphs.xsl.xml"?>

<charts num_charts="1">

   <chart type="pie" width="400" height="300" align="left" >
       <title>How Much Pizza I Ate Last Night</title>

       <columns>
            <column name="Topping" type="string"/>
            <column name="Slices"  type="number"/>      
       </columns>

       <rows>
            <row name="Mushrooms" value="3" />
            <row name="Onions" value="1" />  
            <row name="Olives" value="1" />       
            <row name="Zucchini" value="1" /> 
            <row name="Pepperoni" value="2" />         
       </rows>
   </chart>

</charts>

我需要将列和行传递到xslt文件中，该文件使用谷歌API来实现饼图

<?xml version="1.0" encoding="utf-8"?> 
<xsl:stylesheet version="1.0"  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > 
<xsl:output method="html"/> 
<xsl:template match="/charts"> 
<html> 
  <head> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 

    <script type="text/javascript"> 
      google.load("visualization", "1", {packages:["corechart"]}); 
      google.setOnLoadCallback(drawChart); 
      function drawChart() { 
        var data = new google.visualization.DataTable(); 
        data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');

            data.addRows([
              ['Mushrooms', 3],
              ['Onions', 1],
              ['Olives', 1],
              ['Zucchini', 1],
              ['Pepperoni', 2]
            ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
        var chart = new 
            google.visualization.PieChart(document.getElementById('chart_div')); 
        chart.draw(data, options); 
      } 
    </script> 
  </head> 
  <body> 
    <div id="chart_div"></div> 
  </body> 
</html> 
</xsl:template> 


</xsl:stylesheet>

我需要使用foreach将xml中的列和行传递给xslt文件，而不是使用data.addColumn和data.addRows。我怎样才能做到这一点？

Answer 1

就xslt而言，javascript只是文本，它只在xslt完成构建html页面后执行，所以类似下面的内容生成一个等同于你显示的代码的文档。（我在原始版本的google.com/jsapi上收到错误，我没有调试）

<?xml version="1.0" encoding="utf-8"?> 
<xsl:stylesheet version="1.0"  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > 

<xsl:template match="/charts" xmlns="http://www.w3.org/1999/xhtml"> 
<html> 
  <head> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
      google.load("visualization", "1", {packages:["corechart"]}); 
      google.setOnLoadCallback(drawChart); 
      function drawChart() { 
        var data = new google.visualization.DataTable(); 
<xsl:for-each select="chart/columns/column">
        data.addColumn(<xsl:text/>
  <xsl:text>'</xsl:text>
  <xsl:value-of select="@type"/>
  <xsl:text>', '</xsl:text>
  <xsl:value-of select="@name"/>
  <xsl:text>');</xsl:text>
</xsl:for-each>

            data.addRows([
<xsl:for-each select="chart/rows/row">
       <xsl:if test="position()!=1">, &#10;</xsl:if>
       <xsl:text>['</xsl:text>
       <xsl:value-of select="@name"/>
       <xsl:text>, </xsl:text>
       <xsl:value-of select="@value"/>
<xsl:text>]</xsl:text>
</xsl:for-each>
]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};
        var chart = new 
            google.visualization.PieChart(document.getElementById('chart_div')); 
        chart.draw(data, options); 
      } 
    </script> 
  </head> 
  <body> 
    <div id="chart_div"></div> 
  </body> 
</html> 
</xsl:template> 


</xsl:stylesheet>

如何在javascript函数中嵌入xslt？

1 个答案: