.NET 中的 Google 图表

• 下载源代码 - 4.91 KB
• 下载文本文档 - 4.17 KB

引言

Google 提供了一个开放的 API，用于生成可以在我们的商业 Web 应用程序中使用的图表。我们可以使用 Google 图表 API 生成各种图形。

Google 图表 API 允许您动态生成图表。要查看图表 API 的实际效果，请打开一个浏览器窗口并将以下 URL 复制到其中

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World  

以下类型的图表可用

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

以下文章演示了在 ASP.NET 中使用图形的方法。

使用图像标签并将源放在那里

<img src="http://chart.apis.google.com/chart?cht=p3&chd=s:asR&chs=400x150&chl=A|B|C" />

我们可以传递各种参数来增强图形。以下是一些

图形标题

我们可以使用以下方式放置图表标题

例如：chtt=Welcome chts

图形样式

我们可以放置图形图块颜色和字体大小

chts 用于标题样式：颜色、大小

例如：chts=225ff0,20

图形颜色

我们可以拥有不同的颜色

chco 用于颜色：一个或多个

例如：chco=ff0000,00ff00,0000ff

传递数据

可以使用各种编码技术（例如简单、文本等）传递数据。我已经用 C# 为您完成了简单的编码。

public string GenerateGraph()
{
    //Get the Data to draw the graph
    DataTable dt = new DataTable();
    dt = dtGraphData;

    //Get the max vals in the Data
    int maxval = GetMaxVal(dt);    

    //SAMPLE: http://chart.apis.google.com/chart?
    //        cht=p3&chs=400x200&chd=s:asR&chl=A|B|C
    string GReqURL = http://chart.apis.google.com/chart?chts=+
		GTitleColor+","+GTitleSize+"&chtt="+GTitle+"&chco="+GColors+
		"&cht=p3&chs="+GWidth+"x"+GHeight;

    //chts for Title Style : color,size
    //chtt for title text 
    //chco for colors: one or many

    string simpleEncoding = 
		"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    string chartData = string.Empty;
    string chartLabels = string.Empty;
    StringBuilder strbchartData = new StringBuilder();
    StringBuilder strbchartLabels = new StringBuilder();

    strbchartData.Append("&chd=s:");
    strbchartLabels.Append("&chl=");

    int strlen = simpleEncoding.Length - 1;
    foreach (DataRow dr in dt.Rows)
    {
        //Generate the chart DATA
        int arrVal = Convert.ToInt32(dr[2]);
        int len = strlen * arrVal / maxval;
        strbchartData.Append(simpleEncoding.Substring(len, 1));

        //Generate the Chart Labels
        strbchartLabels.Append(dr[1] + "|");
    }

    //Converting the string builder to string
    chartData = strbchartData.ToString();
    chartLabels = strbchartLabels.ToString();

    chartLabels = chartLabels.Substring(0, chartLabels.Length - 1);
    return GReqURL + chartData + chartLabels;
} 

代码是用 C# 编写的。您可以分配想要分配的所有属性，最后调用 GenerateGraph 方法，该方法返回一个 string。以下是代码示例。整个文章使用 PIE 图形示例进行了解释。可以使用相同的方法实现其余图形。

    DataTable dt = new DataTable();
    //Get the Data the data table and pass it         
    dt = GetGraphData();                
    PieGraph pg = new PieGraph();
    pg.GraphColors = "5566AA";
    pg.GraphHeight="125";
    pg.GraphWidth="250";
    pg.GraphTitle = "Welcome to Test Graph";
    pg.GraphTitleColor = "112233";
    pg.GraphTitleSize = "20";
    pg.dtData = dt;
    
    GGReq = pg.GenerateGraph();        
    
    this.DataBind();
}

DataTable GetGraphData()
{
    SqlConnection con = new SqlConnection(connectionstring);
    SqlCommand cmd = new SqlCommand("Select * from GraphSupp", con);
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    da.Fill(dt);
    return dt;
} 

我使用了 3 列 id、description 和 count，并生成了一个 string，然后将该字符串分配给图像源。
这是为了展示如何将数据传递给 PI 图形，我们也可以为其他图形执行简单的编码……

生成图形的步骤

1. 创建一个 DataTable，其中第 2 列为标签，第 3 列为数据
2. 创建一个 PieGraph 的实例（请参阅我附带的文本文档）
3. 分配属性
4. 将返回的 string 放置到图像标签的源中
5. 生成图形

关注点

1. 轻松生成图形
2. Web 服务器上的工作量较少，因为无需使用 Drawing 命名空间渲染图像
3. 增强了外观和感觉，并且对所有人开放

参考文献

• http://code.google.com/apis/chart/

历史

• 2008 年 1 月 20 日：初始帖子