WebMatrix教程(五) (快速建立数据图表的方案)

很多人都知道使用 Webmatrix -- Microsoft 推出的最新武器可以很容易帮助你在windows下设置安装最常用的php, asp.net 开源网络应用如:wordpress, DNN, Umbraco, mojoportal, Joomla 等。

同时Webmatrix支持的Razor让你可以很快的建立小型动态的.net网站,其实Webmatrix 还有一个卖点就是它有Helper库,熟悉了解这些Helper才可能真正的使用Webmatrix来建立具有应用价值的网站。

今天我们来看看图表的库: Chart。

 

如果你以前没有接触过Webmatrix,建议你先快速阅读下面的文章:

WebMatrix教程(一) (关注Microsoft 的最新武器:建立你的第一个WebMatrix网站)

WebMatrix教程(二) (关注Microsoft 的最新武器:基于空白项目建立你的WebMatrix网站[上篇])

WebMatrix教程(三) (关注Microsoft 的最新武器:基于空白项目建立你的WebMatrix网站[下篇])

WebMatrix教程(四) (读取数据库)

 

支持多种图表

先建立一个空白站点或者使用WebMatrix 的 Template 建立一个Starter Site:

ScreenShot033

 

新建一个cshtml 文件,命名为MyCharts.cshtml

 

删除自动生成代码,替换成下面的:

@{


var firstChart = new Chart(width: 350, height: 250)
.AddTitle("图表测试")
.AddSeries(
name: "Teams", chartType: "Bar",
xValue: new[] { "China", "USA", "Canada", "UK" },
yValues: new[] { "12", "6", "4", "3"})
.Write();
}

点击 Run,在浏览器中生成的页面如下:

ScreenShot034

 

chart 帮助支持多种形式的图表,如饼图,线,填充,柱形图。如果你改变ChartType的值就可以轻松获取不同种类的图表:

将上面代码中的

name: "Teams", chartType: "Bar",

替换成:

name: "Teams", chartType: "Pie",

可以得到:

ScreenShot035

替换成:

name: "Teams", chartType: "Line":
ScreenShot036

 

或者:

name: "Teams", chartType: "Area",

ScreenShot037

 

当然数据来源还可以是database table 或者 xml 文件:

 

从 Database 中读取

在这里,我们建立一个名叫supermen的table,然后定义它的列如下:

 

ScreenShot038

再输入一些初始数据:

 

ScreenShot039

 

将mycharts中原来的代码删除,替换成:

 

@{
var db = Database.Open("StarterSite");
var data = db.Query("SELECT Name, Power FROM Supermen");
var secChart = new Chart(width: 350, height: 250)
.AddTitle("超人大比拼")
.DataBindTable(dataSource: data, xField: "Name")
.Write();

}
 
DataBindTable 指定了数据源和X轴使用的数据。
或者你也可以分别指定X轴和Y轴:
 
var secChart = new Chart(width: 350, height: 250)
.AddTitle("超人大比拼")
.AddSeries("Default",
xValue: data, xField: "Name",
yValues: data, yFields: "Power").Write();

都生成下面的图表:

 

ScreenShot041

 

从XML中读取

如果要从XML中读取数据,我们要先建立两个文件:XML 数据文件,和XSD 结构文件。

 

在App_Data目录下新建一个文件命名为data.xml,编辑并改写文件内容如下:

 

<?xml version="1.0" standalone="yes" ?>
<NewDataSet xmlns="http://tempuri.org/data.xsd">
    <User>
        <Name>Alex</Name>
        <Age>31</Age>
    </User>
    <User>
        <Name>Adam</Name>
        <Age>30</Age>
    </User>
    <User>
        <Name>Otto</Name>
        <Age>23</Age>
    </User>
    <User>
        <Name>Jessica</Name>
        <Age>8</Age>
    </User>
</NewDataSet>

 

再生成一个名为data.xsd的文件,使用如下对应的格式:

 

<?xml version="1.0" ?>
<xs:schema
    id="NewDataSet"
    targetNamespace="http://tempuri.org/data.xsd"
    xmlns:mstns="http://tempuri.org/data.xsd"
    xmlns="http://tempuri.org/data.xsd"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:msdata="urn:schemas-microsoft-com:xml-msdata"
    attributeFormDefault="qualified"
    elementFormDefault="qualified">
    <xs:element name="NewDataSet"
        msdata:IsDataSet="true"
        msdata:EnforceConstraints="False">
        <xs:complexType>
            <xs:choice maxOccurs="unbounded">
                <xs:element name="User">
                    <xs:complexType>
                        <xs:sequence>
                            <xs:element
                                name="Name"
                                type="xs:string"
                                minOccurs="0" />
                            <xs:element
                                name="Age"
                                    type="xs:int"
                                    minOccurs="0" />
                        </xs:sequence>
                    </xs:complexType>
                </xs:element>
            </xs:choice>
        </xs:complexType>
    </xs:element>
</xs:schema>

 

最后我们新建一个名为users.cshtml的文件,并且编辑其内容为:

 

@using System.Data;
@{
var dataSet = new DataSet();
dataSet.ReadXmlSchema(Server.MapPath("~/App_Data/data.xsd"));
dataSet.ReadXml(Server.MapPath("~/App_Data/data.xml"));
var dataView = new DataView(dataSet.Tables[0]);

var myChart = new Chart(width: 350, height: 300)
.AddTitle("用户年龄")
.AddSeries("图表",
xValue: dataView, xField: "Name",
yValues: dataView, yFields: "Age")
.Write();
}

 

解释一下上面的代码 using System.Data 表示要引用 System.Data 类库.

DataSet.ReadXmlSchema 读取我们将要使用数据的结构,ReadXml读取数据源.

 

DataView从dataSet中得到第一个表格,即我们要使用的数据:

点击run后,生成的页面如下:

 

ScreenShot042

 

本文来自于喜乐的ASP.NET(Alex Song) 转贴请注明出处

posted @ 2011-09-30 02:29 拥有的都是恩典 阅读(...) 评论(...) 编辑 收藏