Как встроить xslt в функции JavaScript? - PullRequest
Новая
       0

Как встроить xslt в функции JavaScript?

1 голос
/ 12 марта 2012

Я застрял в проблеме, которая требует от меня передачи элементов в xml в функцию javascript внутри файла 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>

Мне нужно передать столбцы и строки в файл xslt, использующий API Google для реализации круговой диаграммы 

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

Вместо использования data.addColumn и data.addRows мне нужно использовать foreach для передачи столбцов и строк из файла xml в файл xslt. Как я могу это сделать?

1 Ответ

0 голосов
/ 13 марта 2012

Что касается 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...