XForms/Google 圖表

動機

您想使用 Web 服務來建立圖表。

方法

在本例中，我們將使用 Google Chart Web 服務：*。每個使用者每天允許生成最多 50,000 個圖表。

引數

Google Chart 應用程式從 URL 中獲取多個引數。對於簡單的餅圖，這些引數可能包括

http://chart.apis.google.com/chart?
cht=p
&chd=t:10,20,30,40,20
&chl=Amount|Indicator|Code|Date|Text
&chs=400x300

在哪裡

http://chart.apis.google.com/chart? - 是 Chart API 的基本 URL
＆號 (＆) 分隔引數。
cht=p 是圖表型別的程式碼。例如，p=2D 餅圖和 p3-3D 餅圖
chd=t:10,20,30,40 是使用 t 格式 (t:10,20,30) 或 s 格式的圖表資料，其中 (s:) a=1 且 z=26
chs=400x300 - 是圖表的尺寸（以畫素為單位）。
chl=Amount|Indicator|Code|Date|Text 是餅圖的標籤。

下一步是將這些 REST 引數放入 XForms 例項，並將例項連線到輸入控制元件。

XML 例項中的餅圖引數

以下是餅圖型別、資料、標籤和大小資訊的引數。

<xf:instance id="chart-params" xmlns="">
   <data>
      <cht/>
      <chd/>
      <chl/>
      <chs/>
   </data>
</xf:instance>

圖表提交

我們將使用以下提交語句將我們的 XForms 資料提交到伺服器。

<xf:submission id="get-chart"
   method="get" action="http://chart.apis.google.com/chart"  
   separator="&amp;" ref="instance('chart-params')" replace="all"/>

繫結規則

以下是圖表引數的示例輸入表單

以下是使用此應用程式生成的示例輸出圖表。

Google Code 上的示例 XForms 應用程式

執行

示例程式

<html xmlns:xf="http://www.w3.org/2002/xforms"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Google Pie Chart Demo</title>
        <style type="text/css">
            @namespace xf url("http://www.w3.org/2002/xforms");
            body {font-family: Helvetica, sans-serif}
            
            /* This line ensures all the separate input controls appear on their own lines */
            xf|input, xf|select1 {display:block; margin:5px 0;}
            
            /* this puts the labels in 200px columns and right aligns them */
            xf|input > xf|label, xf|select1 > xf|label
            {text-align:right; padding-right:10px; width:200px; float:left; text-align:right;}
           
            .xf-value {width: 250px}
        </style>
        <xf:model>
            <xf:instance id="chart-params" xmlns="">
                <data>
                    <cht>p</cht>
                    <chs>400x200</chs>
                    <chd>t:1,2,60,40,2</chd>                    
                    <chl>Amount|Indicators|Code|D|Text</chl>
                </data>
            </xf:instance>
               
            <xf:submission id="get-chart" action="http://chart.apis.google.com/chart" method="get" 
                separator="&amp;" ref="instance('chart-params')" replace="all"/>
            
            <!-- put the cursor in the first field when the form becomes ready -->
            <xf:action ev:event="xforms-ready">
                <xf:setfocus control="field-1"/>
            </xf:action>
        </xf:model>
    </head>
    <body>
        <h3>Google PieChart Demo</h3>

        <xf:select1 ref="cht" id="field-1">
            <xf:label>Chart Type: </xf:label>
            <xf:item>
                <xf:label>Pie Chart - flat</xf:label>
                <xf:value>p</xf:value>
            </xf:item>
            <xf:item>
                <xf:label>Pie Chart - 3D</xf:label>
                <xf:value>p3</xf:value>
            </xf:item>
        </xf:select1>
        
        <xf:input ref="chd">
            <xf:label>Data: (t:5,10,20): </xf:label>
        </xf:input>
        
        <xf:input ref="chl">
            <xf:label>Labels: (A|B) </xf:label>
        </xf:input>
        
        <xf:submit submission="get-chart">
            <xf:label>Create Chart</xf:label>
        </xf:submit>
        
    </body>
</html>

討論

這實際上是最簡單的應用程式之一。Google 圖表有五種圖表型別和數百種引數組合。圖表型別為 (cht)

折線圖
條形圖
餅圖
維恩圖
散點圖

可以使用一些示例 XForms 生成各種圖表來測試這些圖表。

下一頁：維恩圖 | 上一頁：餅圖
首頁： XForms