Question

我试图在facelets jsf页面内的谷歌图表库的官方网站上绘制一个基本规格..但是我收到错误[错误：属性x：预期长度，＆＃34; NaN＆＃34;。] ..注意到我检查了html元素并发现与尺寸内显示的文字相关的属性

<text text-anchor="middle" x="NaN" y="NaN" font-family="arial" font-size="12" stroke="none" stroke-width="0" fill="#333333">Memory</text>
<text text-anchor="middle" x="NaN" y="NaN" font-family="arial" font-size="12" stroke="none" stroke-width="0" fill="#000000">57</text>

注意到如果我尝试了一个普通的jsf页面而不是facelets，那么..图表会成功呈现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">

    <head>

  <title>

  <ui:insert name="title">
  ::::Test::::
  </ui:insert>
  </title>

 <a4j:loadStyle src="/images/webInterface.css"></a4j:loadStyle>
 <link rel="SHORTCUT ICON" href="/images/favicon.ico" />

<ui:insert name="script">
<script type="text/javascript">
    function load(){
        var imgs = document.body.getElementsByTagName("IMG");
        for (i = 0 ; i &lt; imgs.length; i++)
            imgs[i].removeAttribute("alt");
    }
    function openMessagesWindow(requestId)
    {   
        url ='service_subscription_status_messages.jsf?requestId='+requestId;
        window.open(url,"messages","location=no,menubar=no,toolbar=yes,resizable=yes,border=no,titlebar=no,status=no,scrollbars=yes,width=600,height=500");

    }
    </script>
    </ui:insert>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80]
        ]);
        var options = {
          width: 400, height: 120
        };
        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 10000);
      }
    </script>
    </head>

<f:view>
    <body>
<center><!-- begin -->

<table style="width: 950px;" border="0" cellpadding="0" cellspacing="0" valign="top" align="center" bgcolor="white">
  <tbody>
    <tr>

      <td style="background-color: rgb(255, 255, 255); height: 138px; vertical-align: bottom;">
      <h:graphicImage value="/images/main-banner.JPG" border="0" height="150" width="950"  />
      </td>
        <td>    <div id="chart_div"></div></td>
    </tr>
    <tr>
      <td align="middle" bgcolor="#ffffff" height="3">
      <table id="table1" border="0" cellspacing="7" width="100%">
        <tbody>
          <tr>
            <td class="titleStripe" align="left" height="20" valign="center" width="603">
            <span> <a style="text-decoration: none;color: #77a42f;" href="#{facesContext.externalContext.requestContextPath}/index.jsp"><b>home</b></a>
            : <span lang="en-us"><font color="#77a42f">Test</font></span></span></td>
          </tr>
        </tbody>
      </table>
      <table id="table2" border="0" cellspacing="7" width="100%">
        <tbody>
          <tr>
            <!-- begin content --> 
                <td class="topTD"  height="100%" valign="top" width="177">
                    <ui:include src="/commons/leftMenu.xhtml" /> 

            </td>
<!-- begin of the middle cell, where the content changes -->
            <td class="topTD" align="left" bgcolor="#ffffff" valign="top" width="598">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody>
                <tr>
                  <td class="topTD" width="100%">

                  <ui:insert name="body"></ui:insert>
                  </td>
                </tr>
              </tbody>
            </table>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
<tr>
<td align="center">


        <h:graphicImage value="/images/footer.JPG" />
        </td>
</tr>
  </tbody>
</table>
</center>
<rich:modalPanel id="dispannel" width="100" height="100">
        <h:graphicImage value="/images/loading.gif"  width="80" height="80"/>
</rich:modalPanel>
</body>
</f:view>
</html>

JSF页面中的谷歌图表（规范）

0 个答案: