XForms/餅圖

動機

您希望使用範圍控制元件來互動式地更改圖形，例如餅圖。在本例中，我們使用一個 JavaScript 庫來修改SVG 影像。餅圖的資料儲存在模型中的例項中。

螢幕影像

工作 XForms 應用程式的連結

示例程式

<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xi="http://www.w3.org/2001/XInclude">
   <head>
      <link rel="stylesheet" href="pie-chart.css" type="text/css" />
      <title>Pie Chart with XForms Range Controls</title>
      <script type="text/javascript" src="pie-chart.js" />
      <xf:model id="theModel">
         <xf:instance id="theData">
            <charts xmlns="">
               <piechart>
                  <wedge01>120</wedge01>
                  <wedge02>120</wedge02>
                  <wedge03>120</wedge03>
                  <wedge04>0.00</wedge04>
               </piechart>
            </charts>
         </xf:instance>
         <!-- Section 2 -->
         <xf:bind nodeset="/charts/piechart/wedge01" type="xsd:decimal" />
         <xf:bind nodeset="/charts/piechart/wedge02" type="xsd:decimal"  />
         <xf:bind nodeset="/charts/piechart/wedge03" type="xsd:decimal" />
         <xf:bind nodeset="/charts/piechart/wedge04" type="xsd:decimal" />
         <xf:bind nodeset="/charts/piechart/wedge04" calculate="/charts/piechart/wedge01 + /charts/piechart/wedge02 + /charts/piechart/wedge03" />
      </xf:model>
   </head>
   <body onload="showChart('chart')">
      <h1>Pie Chart with XForms Range Controls</h1>
      <div id="chart">
         <!-- Placeholder for chart.  Javascript will load here. -->
      </div>
       <br />
      <xf:range ref="/charts/piechart/wedge01" id="s2l1" start="0" end="360" incremental="true">
         <xf:label>Red:</xf:label>
         <xf:action ev:event="xforms-value-changed">
            <xf:load resource="javascript:updateChart('chart')" />
         </xf:action>
      </xf:range>

      <xf:range ref="/charts/piechart/wedge02" start="0" end="360" incremental="true">
         <xf:label>Orange:</xf:label>
         <xf:action ev:event="xforms-value-changed">
            <xf:load resource="javascript:updateChart('chart')" />
         </xf:action>
      </xf:range>

      <xf:range ref="/charts/piechart/wedge03" start="0" end="360" incremental="true">
         <xf:label>Yellow:</xf:label>
         <xf:action ev:event="xforms-value-changed">
            <xf:load resource="javascript:updateChart('chart')" />
         </xf:action>
      </xf:range>
   </body>
</html>

討論

此示例展示了使用滑鼠互動式地更改值的一種簡潔乾淨的方法。不需要鍵盤。以下是第一個範圍控制元件的示例。

<xf:range ref="/charts/piechart/wedge01" start="0" end="360" incremental="true">
    <xf:label>Red:</xf:label>
    <xf:action ev:event="xforms-value-changed">
        <xf:load resource="javascript:updateChart('chart')" />
    </xf:action>
</xf:range>

這是一個示例，說明如何將例項文件用作表單中外部元件的介面。您只需將資料放在例項中，並告訴應用程式獲取資料即可。

鳴謝

此示例最初受到 Mozilla 網站上 1040 稅表示例的啟發。繪製餅圖的 JavaScript 程式碼取自該示例。

下一頁： Google 圖表 | 上一頁：高階搜尋
主頁： XForms