使用 XML 和 LINQ 创建图表
使用 LINQ 和 XML 将数据展示在图表中。
引言
假设您有以下任务：您的销售经理需要从他们的网站上查看去年的销售额。您可以创建一个从数据库中显示数据的表格；但是，以条形图或饼图的形式更容易阅读。
对于这篇文章，我创建了一个名为 data 的简单数据库，并添加了一个名为 yearSales 的表，并将虚拟数据放入其中。这是我的第一篇文章，请记住这一点。
背景
您需要了解以下内容：JS Charts 和 Andrew Urquhart 的 request 查询字符串脚本。您还应该具备 LINQ 和 XML 的基本知识。
Using the Code
让我们从创建第一个页面 (Default.aspx) 开始。 在此页面上，我创建了一个简单的 GridView、一个 TextBox、一个 DropDownList 和一个 Button。这将简单地在 GridView 上显示来自数据库的数据。
protected void Page_Load(object sender, EventArgs e)
{
showSales();
}
private void showSales()
{
companyDataDataContext db = new companyDataDataContext();
var figures = from s in db.yearSales
select new { s.Month, s.Amount };
GridView1.DataSource = figures;
GridView1.DataBind();
}
您必须包含以下命名空间才能使其正常工作
using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
接下来，我们需要创建一个方法，以便将以下数据放入 XML 文件中（您需要先在项目中创建 XML 文件）。 我们还需要一些用户输入：在这种情况下，他们需要的图表类型。
private void createChart()
{
string t = DropDownList1.SelectedValue.ToString();
companyDataDataContext db = new companyDataDataContext();
XElement xml = new XElement("JSChart",
new XElement("dataset",
new XAttribute("type", t),
from c in db.yearSales
select new XElement("data",
new XAttribute("unit", c.Month),
new XAttribute("value", c.Amount)
)
)
);
xml.Save(MapPath("sales.xml"));
}
现在，按钮必须运行 createChart 方法；您还必须将文本框和下拉列表中的数据传递到查询字符串中。
protected void Button1_Click(object sender, EventArgs e)
{
createChart();
string chname = TextBox1.Text;
string t = DropDownList1.SelectedValue.ToString();
Response.Redirect("showChart.aspx?name=" + chname + "&type=" + t);
}
下一页：在此页面中，我们不需要做太多的后端编码；我们需要做的就是显示销售额 GridView。
protected void Page_Load(object sender, EventArgs e)
{
showSales();
}
private void showSales()
{
companyDataDataContext db = new companyDataDataContext();
var figures = from s in db.yearSales
select new { s.Month, s.Amount };
GridView1.DataSource = figures;
GridView1.DataBind();
}
现在，让我们看看客户端编码，使用 JS Charts 和 Request.QueryString 函数。 我们需要在页面的 <body> 选择中进行一些 JavaScript 编码。
var chartName = Request.QueryString("name");
var type = Request.QueryString("type");
var t = type.toString();
if (t == "bar") {
var name = chartName.toString();
var myColors = new Array('#CE0000', '#EF2323', '#D20202', '#A70000', '#850000',
'#740000', '#530000', '#850000', '#B00000',
'#9C0404', '#CE0000', '#BA0000');
var myChart = new JSChart('graph', 'bar');
myChart.setDataXML("sales.xml");
myChart.setBarValues(false);
myChart.setTitle(name);
myChart.colorizeBars(myColors);
myChart.setAxisValuesColor("#000000");
myChart.draw();
}
else if (t == "pie") {
var colors = ['#FFCC00', '#FFFF00', '#CCFF00', '#99FF00', '#33FF00', '#00FF66',
'#00FF99', '#00FFCC', '#FF0000', '#FF3300', '#FF6600', '#FF9900'];
var chartName = Request.QueryString("name");
var name = chartName.toString();
var myChart = new JSChart('graph', 'pie');
myChart.setDataXML("sales.xml");
myChart.setTitle(name);
myChart.colorizePie(colors);
myChart.setPiePosition(308, 170);
myChart.setPieRadius(95);
myChart.setPieUnitsFontSize(8);
myChart.setPieUnitsColor('#474747');
myChart.setPieValuesColor('#474747');
myChart.setPieValuesOffset(-10);
myChart.setTitleColor('#fff');
myChart.setSize(616, 321);
myChart.setBackgroundImage('chart_bg.jpg');
myChart.draw();
}
else {
alert("You have incorrect Data in order to create a chart");
}
为了更好地解释代码，您需要做的就是请求查询字符串，它将创建用户要求的图表。 仅此而已！
这是一种从图表中的数据库显示数据的简单但容易的方法。
关注点
JS Charts 是一个非常有趣的基于 JavaScript 的图表生成器，它是免费的。 您可以使用它做很多不同的事情。 LINQ 是一种从数据库中获取数据的好方法，而无需编写长的 T-SQL 脚本，因此，如果您需要在您的项目上进行简单的查询，LINQ 是最佳选择。