使用 ASP.NET 探索 Google Chart API

下载 XploringGoogleChartAPI.zip - 46.07 KB

引言

本文解释了我所做的一个小型网站。该网站有两个主要目的。首先，演示如何使用 Google Chart API。其次，为初学者使用 ASP.NET 的基本功能制作一个有意义的网站。

致谢

我要感谢 Syed Muhammad Akber Zaidi 先生指导我进行代码项目。

先决条件和目标受众？

一点 ASP.NET 知识，或者任何服务器端技术的知识。

解释

Google Chart API 允许用户以.png格式获取指定数据的图表。用户使用以下 URL，在其后附加不同的参数作为查询字符串，以控制图表的生成。

http://chart.apis.google.com/chart?...

该 API 提供大约 9 种类型的图表。我只使用了基本的 4 种。

• 条形图
• 折线图
• 饼图
• 维恩图

不同的页面在做什么...

该网站有 6 个.aspx页面，一个.master页面和 7 个.aspx.cs文件。以下是它们的功能

Master.master

所有其他页面都继承自的模板。母版页为设计者提供了一种设计具有一致外观的网站的方法。

Default.aspx

网站的第一页。包含指定所有图表通用选项的控件。

Bar.aspx

包含与条形图相关的选项。

Line.aspx

包含与折线图相关的选项。

Pie.aspx

包含与饼图相关的选项。

Venn.aspx

包含与维恩图相关的选项。

Chart.aspx

显示最终图表。

验证控件

并非所有可能的输入对于 Web 应用程序和 Google Chart API 都是有效的。需要一些约束来确保输入有效。 ASP.NET 为开发人员提供了一系列控件，用于验证文本框、下拉列表等上的用户输入。我已经在 Default.aspx 上放置了其中一些控件，以验证图像尺寸的范围，并确保必要的输入存在。这些控件通过在经过验证的控件旁边显示指定的错误消息来标记错误。关于这些控件的最好的事情是它们不会导致回发。

WebApp 的剖析！

当用户正确地在 Default.aspx 上完成输入所有必要的数据后，他/她点击页面上的“下一步”按钮。这会导致针对该按钮的事件处理程序开始执行操作。按钮后面的代码是：

    protected void btnNext_Click(object sender, EventArgs e)
    {
        Session["width"] = txtWidth.Text;
        Session["height"] = txtHeight.Text;
        string url = "chs=" + txtWidth.Text + "x" + txtHeight.Text + "&chd=t:" +
            txtData.Text;
        if (txtLabels.Text != string.Empty)
            url += ("&chl=" + txtLabels.Text);
        if (txtColors.Text != string.Empty)
            url += ("&chco=" + txtColors.Text);
        Session["url"] = url;

        Response.Redirect(drpType.SelectedValue + ".aspx");
    }

上面的代码创建会话变量来跟踪大小参数。它还构建最终的图像 URL 并将其分配给另一个会话变量url。最后，代码根据图表类型的下拉菜单中所选的值将控制权转移到下一页。

在下一页上，有选定类型的图表的选项。页面上的“下一步”按钮有一些这样的代码：

    protected void btnNext_Click(object sender, EventArgs e)
    {
        string temp = Session["url"].ToString();
        string url = "cht=b" + grpDirection.SelectedValue + grpType.SelectedValue;
        Session["url"] = url + "&" + temp;
        Response.Redirect("Chart.aspx");
    }

上面的代码从url会话变量中提取值，将更多选项值附加到它，然后将值重新分配给它。最后，控制权被转移到 Chart.aspx，其中 Page_Load 事件根据用户输入设置图像，如下所示

    protected void Page_Load(object sender, EventArgs e)
    {
        imgChart.Width = int.Parse(Session["width"].ToString());
        imgChart.Height = int.Parse(Session["height"].ToString());
        imgChart.ImageUrl = "http://chart.apis.google.com/chart?" +
            Session["url"].ToString();
    }