Опубликован: 15.06.2011 | Доступ: свободный | Студентов: 708 / 59 | Оценка: 4.25 / 4.00 | Длительность: 14:09:00
Самостоятельная работа 6:

Web Matrix. Отображение данных: диаграммы

Создание диаграмм при помощи XML

1.В папке проекта App_Data создадим новый XML файл и назовем его data.xml:

2.Заменим исходный код data.xml на:

<?xml version="1.0" standalone="yes" ?>
<NewDataSet xmlns="http://tempuri.org/data.xsd">
    <Employee>
        <Name>Erin</Name>
        <Sales>10440</Sales>
    </Employee>
    <Employee>
        <Name>Kim</Name>
        <Sales>17772</Sales>
    </Employee>
    <Employee>
        <Name>Dean</Name>
        <Sales>23880</Sales>
    </Employee>
    <Employee>
        <Name>David</Name>
        <Sales>7663</Sales>
    </Employee>
    <Employee>
        <Name>Sanjay</Name>
        <Sales>21773</Sales>
    </Employee>
    <Employee>
        <Name>Michelle</Name>
        <Sales>32294</Sales>
    </Employee>
</NewDataSet>

3.В корневой папке проекта создадим новый CSHTML файл и назовем его ChartDataXML.cshtml:

4.Заменим исходный код файла ChartDataXML.cshtml на:

@using System.Data;
@{
    var dataSet = new DataSet();
    dataSet.ReadXml(Server.MapPath("/App_Data/data.xml"));
    var dataView = new DataView(dataSet.Tables[0]);
    var key = new Chart(width: 600, height: 400)
        .AddTitle("Sales Per Employee")
        .AddSeries("Default", chartType: "Pie",
            xValue: dataView, xField: "name",
            yValues: dataView, yFields: "sales")
        .Write();
}

В дано фрагменте кода, сначала создается объект DataSet, для его создания необходимо подключить пространство имен System.Data:

@using System.Data;
@{
    var dataSet = new DataSet();

Далее идет считывание данных из XML файла:

dataSet.ReadXml(Server.MapPath("/App_Data/data.xml"));

Создаем объект DataView на основе Dataset:

var dataView = new DataView(dataSet.Tables[0]);

Формируем диаграмму на основе данных DataView:

var key = new Chart(width: 600, height: 400)
        .AddTitle("Sales Per Employee")
        .AddSeries("Default", chartType: "Pie",
            xValue: dataView, xField: "name",
            yValues: dataView, yFields: "sales")
        .Write();

Где параметр chartType тип диаграммы (в нашем случае круговая).

5.Запустим веб-страницу. В браузере отобразится диаграмма, которая строится на основе XML файла: