xsltをjavascript関数の中に埋め込む方法は？

私はxmlの要素をxsltファイルのjavascript関数に渡す必要があるという問題に悩まされました。私が代わりにdata.addColumnとdata.addRowsを使用しての円グラフxsltをjavascript関数の中に埋め込む方法は？

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

を実装するためにGoogleのAPIを使用しているXSLTファイルに列と行を渡す必要があり

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

、私が必要foreachを使用してxmlからxsltファイルに列と行を渡します。どうやってやるの？

出典

2012-03-11 Jie

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>

出典

2012-03-12 21:46:25

xsltをjavascript関数の中に埋め込む方法は？

答えて

関連する問題