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