Отображение данных на диаграмме с помощью веб-страницы ASP.NET (Razor)

Статья
07/13/2023

В этой статье объясняется, как использовать диаграмму для отображения данных на веб-сайте веб-страницы ASP.NET (Razor) с помощью вспомогательного Chart средства.

Что вы узнаете:

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

Создание стилей диаграмм с помощью встроенных тем.

Как сохранять диаграммы и кэшировать их для повышения производительности.

Ниже приведены ASP.NET функции программирования, представленные в этой статье:

Помощник Chart .

Примечание

Сведения в этой статье относятся к веб-страницы ASP.NET 1.0 и веб-страницам 2.

Вспомогатель диаграммы

Если вы хотите отобразить данные в графическом виде, можно использовать Chart вспомогательное средство. Вспомогательный Chart элемент может отрисовыть изображение, отображающее данные в различных типах диаграмм. Он поддерживает множество вариантов форматирования и маркировки. Вспомогательный Chart инструмент может отрисовывать более 30 типов диаграмм, включая все типы диаграмм, с которыми вы знакомы из Microsoft Excel или других инструментов — диаграммы с областями, линейчатые диаграммы, гистограммы, графики и круговые диаграммы, а также более специализированные диаграммы, такие как фондовые диаграммы.

	Описание линейчатой
Описание гистограммы	Описание графика"
Описание круговой	Описание биржевой"

Элементы диаграммы

На диаграммах отображаются данные и дополнительные элементы, такие как условные обозначения, оси, ряды и т. д. На следующем рисунке показаны многие элементы диаграммы, которые можно настроить при использовании вспомогательного Chart средства. В этой статье показано, как задать некоторые (не все) из этих элементов.

Описание: изображение элементов диаграммы

Создание диаграммы на основе данных

Данные, отображаемые на диаграмме, могут быть из массива, из результатов, возвращаемых из базы данных, или из данных, которые есть в XML-файле.

Использование массива

Как описано в статье Введение в веб-страницы ASP.NET программирование с помощью синтаксиса Razor, массив позволяет хранить коллекцию похожих элементов в одной переменной. Массивы можно использовать для хранения данных, которые необходимо включить в диаграмму.

В этой процедуре показано, как создать диаграмму на основе данных в массивах, используя тип диаграммы по умолчанию. Здесь также показано, как отобразить диаграмму на странице.

Создайте файл с именем ChartArrayBasic.cshtml.
Замените существующее содержимое следующим:
```
@{
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "Employee",
            xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}
```
Код сначала создает новую диаграмму и задает ее ширину и высоту. Заголовок диаграммы можно указать с помощью AddTitle метода . Чтобы добавить данные, используйте AddSeries метод . В этом примере используются nameпараметры AddSeries , xValueи yValues метода . Параметр name отображается в условных обозначениях диаграммы. Параметр xValue содержит массив данных, отображаемых вдоль горизонтальной оси диаграммы. Параметр yValues содержит массив данных, используемый для построения вертикальных точек диаграммы.

Метод Write фактически отрисовывает диаграмму. В этом случае, так как вы не указали тип диаграммы, вспомогательное Chart средство отрисовывает диаграмму по умолчанию, которая является гистограммой.
Запустите страницу в браузере. В браузере отображается диаграмма.

Использование запроса базы данных для данных диаграммы

Если данные, которые требуется на диаграмме, содержатся в базе данных, можно выполнить запрос к базе данных, а затем использовать данные из результатов для создания диаграммы. В этой процедуре показано, как считывать и отображать данные из базы данных, созданной в статье Введение в работу с базой данных на сайтах веб-страницы ASP.NET.

Добавьте папку App_Data в корень веб-сайта, если папка еще не существует.
В папку App_Data добавьте файл базы данных с именем SmallBakery.sdf, описанный в разделе Общие сведения о работе с базой данных на сайтах веб-страницы ASP.NET.
Создайте файл с именем ChartDataQuery.cshtml.
Замените существующее содержимое следующим:
```
@{
    var db = Database.Open("SmallBakery");
    var data = db.Query("SELECT Name, Price FROM Product");
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Product Sales")
        .DataBindTable(dataSource: data, xField: "Name")
        .Write();
}
```
Код сначала открывает базу данных SmallBakery и назначает ее переменной с именем db. Эта переменная представляет Database объект , который можно использовать для чтения из базы данных и записи в нее. Затем код выполняет SQL-запрос, чтобы получить имя и цену каждого продукта. Код создает новую диаграмму и передает ей запрос базы данных путем вызова метода диаграммы DataBindTable . Этот метод принимает два параметра: dataSource параметр предназначен для данных из запроса, а xField параметр позволяет задать столбец данных, используемый для оси X диаграммы.

В качестве альтернативы использованию DataBindTable метода можно использовать AddSeries метод вспомогательного Chart средства. Метод AddSeries позволяет задать xValue параметры и yValues . Например, вместо того, чтобы использовать метод, подобный следующему DataBindTable :
```
.DataBindTable(data, "Name")
```
Метод можно использовать AddSeries следующим образом:
```
.AddSeries("Default",
    xValue: data, xField: "Name",
    yValues: data, yFields: "Price")
```
Оба отображают одинаковые результаты. Метод AddSeries является более гибким, так как вы можете указать тип диаграммы и данные более явно, но DataBindTable метод проще использовать, если вам не требуется дополнительная гибкость.
Запустите страницу в браузере.

Использование XML-данных

Третий вариант создания диаграммы — использовать XML-файл в качестве данных для диаграммы. Для этого требуется, чтобы XML-файл также был файл схемы (XSD-файл ), описывающий структуру XML. В этой процедуре показано, как считывать данные из XML-файла.

В папке App_Data создайте XML-файл с именемdata.xml.

Замените существующий XML следующим кодом, который представляет собой некоторые 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>

В папке App_Data создайте НОВЫЙ XML-файл с именем data.xsd. (Обратите внимание, что расширение на этот раз — XSD.)

Замените существующий XML следующим кодом:

<?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="Employee">
                    <xs:complexType>
                        <xs:sequence>
                            <xs:element
                                name="Name"
                                type="xs:string"
                                minOccurs="0" />
                            <xs:element
                                name="Sales"
                                    type="xs:double"
                                    minOccurs="0" />
                        </xs:sequence>
                    </xs:complexType>
                </xs:element>
            </xs:choice>
        </xs:complexType>
    </xs:element>
</xs:schema>

В корне веб-сайта создайте файл с именем ChartDataXML.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: 600, height: 400)
        .AddTitle("Sales Per Employee")
        .AddSeries("Default", chartType: "Pie",
            xValue: dataView, xField: "Name",
            yValues: dataView, yFields: "Sales")
        .Write();
}
```
Код сначала создает DataSet объект . Этот объект используется для управления данными, которые считываются из XML-файла, и упорядочивания их в соответствии с информацией в файле схемы. (Обратите внимание, что в верхней части кода содержится оператор using SystemData. Это необходимо для работы с DataSet объектом . Дополнительные сведения см. в разделе Операторы Using и Полные имена далее в этой статье.)

Затем код создает объект на DataView основе набора данных. Представление данных предоставляет объект, к которому может привязаться диаграмма, то есть чтение и построение диаграммы. Диаграмма привязывается к данным с помощью AddSeries метода , как вы видели ранее при диаграмме данных массива, за исключением того, что на xValue этот раз параметры и yValues задаются для DataView объекта .

В этом примере также показано, как указать определенный тип диаграммы. При добавлении данных в AddSeries метод chartType также задается параметр для отображения круговой диаграммы.
Запустите страницу в браузере.

Совет

Операторы Using и полные имена

Платформа .NET Framework, на основе которой веб-страницы ASP.NET синтаксис Razor, состоит из многих тысяч компонентов (классов). Чтобы обеспечить управляемое управление для работы со всеми этими классами, они упорядочены по пространствам имен, которые в некоторой степени похожи на библиотеки. Например, пространство имен содержит классы, System.Web поддерживающие взаимодействие между браузером и сервером, System.Xml пространство имен содержит классы, используемые для создания и чтения XML-файлов, а System.Data пространство имен содержит классы, позволяющие работать с данными.

Чтобы получить доступ к любому заданному классу в платформа .NET Framework, код должен знать не только имя класса, но и пространство имен, в которое находится класс. Например, чтобы использовать вспомогательное Chart средство, код должен найти System.Web.Helpers.Chart класс , который объединяет пространство имен (System.Web.Helpers) с именем класса (Chart). Это называется полным именем класса — его полное, однозначное расположение на просторах платформа .NET Framework. В коде это будет выглядеть следующим образом:

var myChart = new System.Web.Helpers.Chart(width: 600, height: 400) // etc.

Однако использовать эти длинные полные имена каждый раз, когда вы хотите ссылаться на класс или вспомогательный класс, это громоздкий (и подверженный ошибкам). Таким образом, чтобы упростить использование имен классов, можно импортировать интересующие вас пространства имен, которые обычно являются лишь горсткой из множества пространств имен в платформа .NET Framework. Если вы импортировали пространство имен, вместо полного имени () можно использовать только имя класса (ChartSystem.Web.Helpers.Chart). Когда код выполняется и встречает имя класса, он может искать только импортированные пространства имен, чтобы найти этот класс.

При использовании веб-страницы ASP.NET с синтаксисом Razor для создания веб-страниц обычно каждый раз используется один и тот же набор классов, включая WebPage класс, различные вспомогательные функции и т. д. Чтобы сэкономить при импорте соответствующих пространств имен при каждом создании веб-сайта, ASP.NET настроен таким образом, чтобы автоматически импортировать набор основных пространств имен для каждого веб-сайта. Вот почему до сих пор вам не приходилось иметь дело с пространствами имен или импортом; все классы, с которыми вы работали, находятся в пространствах имен, которые уже импортированы.

Однако иногда необходимо работать с классом, который не находится в пространстве имен, которое автоматически импортируется. В этом случае можно использовать полное имя этого класса или вручную импортировать пространство имен, содержащее класс . Чтобы импортировать пространство имен, используйте using оператор (import в Visual Basic), как было показано в примере ранее в этой статье.

Например, DataSet класс находится в System.Data пространстве имен . Пространство System.Data имен автоматически недоступно для ASP.NET страниц Razor. Поэтому для работы с классом с использованием его полного DataSet имени можно использовать следующий код:

var dataSet = new System.Data.DataSet();

Если вам нужно многократно использовать DataSet класс , можно импортировать пространство имен, как это, а затем использовать только имя класса в коде:

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

Вы можете добавить using операторы для любых других пространств имен платформа .NET Framework, на которые требуется ссылаться. Однако, как уже отмечалось, это не нужно делать часто, так как большинство классов, с которыми вы будете работать, находятся в пространствах имен, которые автоматически импортируются ASP.NET для использования на страницах .cshtml и .vbhtml .

Отображение диаграмм внутри веб-страницы

В примерах, которые вы видели до сих пор, вы создаете диаграмму, а затем она отображается непосредственно в браузере в виде графического элемента. Однако во многих случаях требуется отобразить диаграмму как часть страницы, а не только сама по себе в браузере. Для этого требуется двухэтапный процесс. Первым шагом является создание страницы, которая создает диаграмму, как вы уже видели.

Второй шаг — отображение результирующего изображения на другой странице. Для отображения изображения используется элемент HTML <img> , как и любое изображение. Однако вместо ссылки на файл.jpg или .png элемент ссылается на CSHTML-файл, <img> содержащий вспомогательный Chart элемент, создающий диаграмму. При запуске <img> отображаемой страницы элемент получает выходные данные вспомогательной Chart функции и отрисовывает диаграмму.

Снимок экрана: диаграммы, отображаемые на веб-странице.

Создайте файл с именем ShowChart.cshtml.

Замените существующее содержимое следующим:

<!DOCTYPE html>
<html>
  <head>
    <title>Chart Example</title>
  </head>
  <body>
    <h1>Chart Example</h1>
    <p>The following chart is generated by the <em>ChartArrayBasic.cshtml</em> file, but is shown
       in this page.</p>
    <p><img src="ChartArrayBasic.cshtml" /> </p>
  </body>
</html>

Код использует элемент для <img> отображения диаграммы, созданной ранее в файле ChartArrayBasic.cshtml .

Запустите веб-страницу в браузере. В файле ShowChart.cshtml отображается изображение диаграммы на основе кода, содержащегося в файле ChartArrayBasic.cshtml .

Стилизация диаграммы

Вспомогательное Chart средство поддерживает большое количество параметров, которые позволяют настраивать внешний вид диаграммы. Вы можете задать цвета, шрифты, границы и т. д. Простой способ настроить внешний вид диаграммы — использовать тему. Темы — это коллекции данных, задающие способ визуализации диаграммы с указанием шрифтов, цветов, меток, палитр, границ и эффектов. (Обратите внимание, что стиль диаграммы не указывает тип диаграммы.)

В следующей таблице перечислены встроенные темы.

Тема	Описание
`Vanilla`	Отображает красные столбцы на белом фоне.
`Blue`	Отображает синие столбцы на синем фоне градиента.
`Green`	Отображает синие столбцы на зеленом градиентном фоне.
`Yellow`	Отображает оранжевые столбцы на желтом градиентном фоне.
`Vanilla3D`	Отображает трехмерные красные столбцы на белом фоне.

Вы можете указать тему, используемую при создании новой диаграммы.

Создайте файл с именем ChartStyleGreen.cshtml.

Замените существующее содержимое на странице следующим:

@{
    var db = Database.Open("SmallBakery");
    var data = db.Query("SELECT Name, Price FROM Product");
    var myChart = new Chart(width: 600,
                        height: 400,
                        theme: ChartTheme.Green)
        .AddTitle("Product Sales")
        .DataBindTable(data, "Name")
        .Write();
}

Этот код такой же, как и в предыдущем примере, в котором база данных используется для получения данных, но при создании Chart объекта добавляется theme параметр . Ниже показан измененный код.

var myChart = new Chart(width: 600,
                    height: 400,
                    theme: ChartTheme.Green)

Запустите страницу в браузере. Вы увидите те же данные, что и раньше, но диаграмма выглядит более полированной:

Сохранение диаграммы

При использовании вспомогательной Chart функции, как вы уже видели в этой статье, она повторно создает диаграмму с нуля при каждом вызове. При необходимости код диаграммы также повторно запрашивает базу данных или повторно считывает XML-файл для получения данных. В некоторых случаях это может быть сложной операцией, например, если запрашиваемая база данных большая или XML-файл содержит много данных. Даже если диаграмма не содержит большого объема данных, процесс динамического создания изображения занимает серверные ресурсы, и если многие пользователи запрашивают страницу или страницы, на которых отображается диаграмма, это может повлиять на производительность вашего веб-сайта.

Чтобы уменьшить потенциальное влияние создания диаграммы на производительность, вы можете создать диаграмму при первой необходимости, а затем сохранить ее. Когда диаграмма потребуется снова, а не повторно, вы можете просто получить сохраненную версию и отобразить ее.

Вы можете сохранить диаграмму следующими способами:

Кэшируйте диаграмму в памяти компьютера (на сервере).
Сохраните диаграмму в виде файла изображения.
Сохраните диаграмму в виде XML-файла. Этот параметр позволяет изменить диаграмму перед сохранением.

Кэширование диаграммы

После создания диаграммы ее можно кэшировать. Кэширование диаграммы означает, что ее не нужно повторно создавать, если ее необходимо снова отобразить. При сохранении диаграммы в кэше вы предоставляете ей ключ, который должен быть уникальным для этой диаграммы.

Диаграммы, сохраненные в кэше, могут быть удалены, если на сервере недостаточно памяти. Кроме того, кэш очищается, если по какой-либо причине приложение перезапускается. Поэтому стандартный способ работы с кэшируемыми диаграммами — всегда проверка сначала, доступна ли она в кэше, а если нет, то создать или повторно создать ее.

В корне веб-сайта создайте файл с именем ShowCachedChart.cshtml.
Замените существующее содержимое следующим:
```
<!DOCTYPE html>
<html>
    <head>
        <title>Chart Example</title>
    </head>
<body>
    <h1>Chart Example</h1>
    <img src="ChartSaveToCache.cshtml?key=myChartKey" />
    <p><a href="ClearCache.cshtml">Clear cache</a></p>
</body>
</html>
```
Тег <img> содержит атрибут , указывающий src на файл ChartSaveToCache.cshtml и передающий ключ на страницу в виде строки запроса. Ключ содержит значение myChartKey. Файл ChartSaveToCache.cshtml содержит вспомогательное Chart средство, создающее диаграмму. Вы создадите эту страницу через некоторое время.

В конце страницы есть ссылка на страницу с именем ClearCache.cshtml. Это страница, которую вы также создадите в ближайшее время. Файл ClearCache.cshtml требуется только для тестирования кэширования в этом примере— это не ссылка или страница, которые обычно включаются при работе с кэшируемыми диаграммами.
В корне веб-сайта создайте файл с именем ChartSaveToCache.cshtml.
Замените существующее содержимое следующим:
```
@{
    var chartKey = Request["key"];
    if (chartKey != null) {
        var cachedChart = Chart.GetFromCache(key: chartKey);
        if (cachedChart == null) {
            cachedChart = new Chart(600, 400);
            cachedChart.AddTitle("Cached Chart -- Cached at " + DateTime.Now);
            cachedChart.AddSeries(
               name: "Employee",
               axisLabel: "Name",
               xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
               yValues: new[] { "2", "6", "4", "5", "3" });
            cachedChart.SaveToCache(key: chartKey,
               minutesToCache: 2,
               slidingExpiration: false);
        }
        Chart.WriteFromCache(chartKey);
    }
}
```
Код сначала проверяет, было ли что-нибудь передано в качестве значения ключа в строке запроса. Если это так, код пытается считывать диаграмму из кэша, вызывая GetFromCache метод и передавая ему ключ. Если окажется, что в кэше нет ничего под этим ключом (что произойдет при первом запросе диаграммы), код создает диаграмму обычным образом. После завершения диаграммы код сохраняет ее в кэше путем вызова SaveToCache. Для этого метода требуется ключ (чтобы запросить диаграмму позже) и время, в течение которого диаграмма должна быть сохранена в кэше. (Точное время кэширования диаграммы будет зависеть от того, как часто вы думали, что представленные на ней данные могут изменяться.) Методу SaveToCache также требуется slidingExpiration параметр — если задано значение true, счетчик времени ожидания сбрасывается при каждом обращении к диаграмме. В этом случае это фактически означает, что срок действия записи в кэше диаграммы истекает через 2 минуты после последнего доступа к диаграмме. (Альтернативой скользящему сроку действия является абсолютный срок действия, то есть срок действия записи кэша истекает ровно через 2 минуты после ее вставки в кэш, независимо от того, как часто к ней осуществляется доступ.)

Наконец, код использует WriteFromCache метод для получения и отрисовки диаграммы из кэша. Обратите внимание, что этот метод находится за пределами if блока, который проверяет кэш, так как он получает диаграмму из кэша независимо от того, была ли диаграмма там, с которой нужно было начать, или она должна была быть создана и сохранена в кэше.

Обратите внимание, AddTitle что в примере метод содержит метку времени. (Он добавляет текущие дату и время — DateTime.Now — в название.)
Создайте страницу с именем ClearCache.cshtml и замените ее содержимое следующим:
```
@{
    WebCache.Remove("myChartKey");
}
<!DOCTYPE html>
<html lang="en">
  <body>
    <p>Cache has been cleared.</p>
    <p>Return to <a href="ShowCachedChart.cshtml">ShowCachedChart.cshtml</a></p>
  </body>
</html>
```
Эта страница использует вспомогательное WebCache средство для удаления диаграммы, которая кэширована в Файле ChartSaveToCache.cshtml. Как отмечалось ранее, обычно не требуется иметь такую страницу. Вы создаете его здесь только для упрощения проверки кэширования.
Запустите веб-страницу ShowCachedChart.cshtml в браузере. На странице отображается изображение диаграммы на основе кода, содержащегося в файле ChartSaveToCache.cshtml . Обратите внимание на то, что метка времени отображается в заголовке диаграммы.
Закройте браузер.
Снова запустите файл ShowCachedChart.cshtml . Обратите внимание, что метка времени та же, что и раньше, что означает, что диаграмма не была повторно создана, а была считана из кэша.
В Файле ShowCachedChart.cshtml щелкните ссылку Очистить кэш . Откроется файл ClearCache.cshtml, который сообщает, что кэш был очищен.
Щелкните ссылку Вернуться к ShowCachedChart.cshtml или повторно запустите Файл ShowCachedChart.cshtml из WebMatrix. Обратите внимание, что на этот раз метка времени изменилась, так как кэш был очищен. Поэтому код должен был повторно создать диаграмму и поместить ее обратно в кэш.

Сохранение диаграммы в виде файла изображения

Диаграмму также можно сохранить в виде файла изображения (например, в виде файла .jpg ) на сервере. Затем файл изображения можно использовать так же, как и любой другой образ. Преимущество заключается в том, что файл хранится, а не сохраняется во временном кэше. Вы можете сохранить новое изображение диаграммы в разное время (например, каждый час), а затем сохранить постоянную запись изменений, происходящих с течением времени. Обратите внимание, что необходимо убедиться, что веб-приложение имеет разрешение на сохранение файла в папку на сервере, в которую вы хотите поместить файл образа.

В корне веб-сайта создайте папку с именем _ChartFiles , если она еще не существует.
В корне веб-сайта создайте файл с именем ChartSave.cshtml.
Замените существующее содержимое следующим кодом:
```
@{
    var filePathName = "_ChartFiles/chart01.jpg";
    if (!File.Exists(Server.MapPath(filePathName))) {
        var chartImage = new Chart(600, 400);
        chartImage.AddTitle("Chart Title");
        chartImage.AddSeries(
                name: "Employee",
                axisLabel: "Name",
                xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
                yValues: new[] { "2", "6", "4", "5", "3" });
        chartImage.Save(path: filePathName);
    }
}
<!DOCTYPE html>
<html>
    <head>
        <title>Chart Example</title>
    </head>
    <body>
        <img src="@filePathName" />
    </body>
</html>
```
Код сначала проверяет, существует ли файл.jpg , путем вызова File.Exists метода . Если файл не существует, код создает новый Chart объект из массива. На этот раз код вызывает Save метод и передает path параметр , чтобы указать путь к файлу и имя файла для сохранения диаграммы. В тексте страницы <img> элемент использует путь, указывающий на отображаемый.jpg файл.
Запустите файл ChartSave.cshtml .
Вернитесь к WebMatrix. Обратите внимание, что файл изображения с именемchart01.jpg сохранен в папке _ChartFiles .

Сохранение диаграммы в виде XML-файла

Наконец, можно сохранить диаграмму в виде XML-файла на сервере. Преимущество использования этого метода по сравнению с кэшированием диаграммы или сохранением диаграммы в файл заключается в том, что при необходимости можно изменить XML-код перед отображением диаграммы. У приложения должны быть разрешения на чтение и запись для папки на сервере, в которую вы хотите поместить файл образа.

В корне веб-сайта создайте файл с именем ChartSaveXml.cshtml.
Замените существующее содержимое следующим кодом:
```
@{
    Chart chartXml;
    var filePathName = "_ChartFiles/XmlChart.xml";
    if (File.Exists(Server.MapPath(filePathName))) {
        chartXml = new Chart(width: 600,
                             height: 400,
                             themePath: filePathName);
    }
    else {
        chartXml = new Chart(width: 600,
                             height: 400);
        chartXml.AddTitle("Chart Title -- Saved at " + DateTime.Now);
        chartXml.AddSeries(
            name: "Employee",
            axisLabel: "Name",
            xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] { "2", "6", "4", "5", "3" });
        chartXml.SaveXml(path: filePathName);
    }
    chartXml.Write();
}
```
Этот код аналогичен коду, который вы видели ранее для хранения диаграммы в кэше, за исключением того, что он использует XML-файл. Код сначала проверяет, существует ли XML-файл, путем вызова File.Exists метода . Если файл существует, код создает новый Chart объект и передает имя файла в themePath качестве параметра . При этом диаграмма будет создана на основе содержимого XML-файла. Если XML-файл еще не существует, код создает диаграмму, похожую на обычную, а затем вызывает SaveXml для ее сохранения. Диаграмма отображается с помощью Write метода , как вы видели ранее.

Как и на странице с кэшированием, этот код включает метку времени в заголовке диаграммы.

Создайте страницу с именем ChartDisplayXMLChart.cshtml и добавьте в нее следующую разметку:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Display chart from XML</title>
  </head>
  <body>
    <img src="ChartSaveXML.cshtml" />
  </body>
</html>

Запустите страницу ChartDisplayXMLChart.cshtml . Отобразится диаграмма. Запишите метку времени в заголовке диаграммы.
Закройте браузер.
В WebMatrix щелкните правой кнопкой мыши папку _ChartFiles , выберите команду Обновить, а затем откройте папку. Файл XMLChart.xml в этой папке был создан вспомогательной службой Chart .
Снова запустите страницу ChartDisplayXMLChart.cshtml . На диаграмме отображается та же метка времени, что и при первом запуске страницы. Это связано с тем, что диаграмма создается на основе СОХРАНЕНного ранее XML-кода.
В WebMatrix откройте папку _ChartFiles и удалите файлXMLChart.xml .
Запустите страницу ChartDisplayXMLChart.cshtml еще раз. На этот раз метка времени обновляется, так как вспомогательной Chart функции пришлось воссоздать XML-файл. При необходимости проверка папку _ChartFiles и обратите внимание, что XML-файл вернулся.

Дополнительные ресурсы

Общие сведения о работе с базой данных на сайтах веб-страницы ASP.NET
Использование кэширования на сайтах веб-страницы ASP.NET для повышения производительности
Класс Chart (справочник по API веб-страницы ASP.NET на сайте MSDN)

Отображение данных на диаграмме с помощью веб-страницы ASP.NET (Razor)

Вспомогатель диаграммы

Элементы диаграммы

Создание диаграммы на основе данных

Использование массива

Использование запроса базы данных для данных диаграммы

Использование XML-данных

Операторы Using и полные имена

Отображение диаграмм внутри веб-страницы

Стилизация диаграммы

Сохранение диаграммы

Кэширование диаграммы

Сохранение диаграммы в виде файла изображения

Сохранение диаграммы в виде XML-файла

Дополнительные ресурсы

Обратная связь

Обратная связь

Дополнительные ресурсы