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

корпорацией Майкрософт

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

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

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

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

  • Помощник. Chart

Note

Информация в этой статье относится к ASP.NET веб-страниц 1.0 и web Pages 2.

Помощник по диаграмме

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

Описание диаграммы зоны: Изображение типа диаграммы зоны Описание диаграммы бара: Изображение типа диаграммы адвокатского сословия
Описание диаграммы колонки: Изображение типа диаграммы колонки Описание диаграммы линии: Изображение типа диаграммы линии
Описание диаграммы пирога: Изображение типа диаграммы пирога Описание фондовой диаграммы: Изображение типа фондовой диаграммы

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

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

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

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

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

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

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

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

  1. Создайте новый файл под названием ChartArrayBasic.cshtml.

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

    @{
        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этом примере xValueиспользуется, yValues и параметры AddSeries метода. Параметр name отображается в легенде диаграммы. Параметр xValue содержит массив данных, отображаемых вдоль горизонтальной оси диаграммы. Параметр yValues содержит массив данных, используемых для составления графика вертикальных точек диаграммы.

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

  3. Запустите страницу в браузере. Браузер отображает диаграмму.

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

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

  1. Добавьте папку App_Data в корень веб-сайта, если папка еще не существует.

  2. В папку App_Data добавьте файл базы данных под названием SmallBakery.sdf, описанный во Введении к работе с базой данных в ASP.NET веб-страниц.

  3. Создайте новый файл под названием ChartData''shtml.

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

    @{
        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 представляет собой объект, который может быть использован для чтения и записи в базу данных. Далее в коде выполняется запрос s'L, чтобы получить имя и цену каждого продукта. Код создает новую диаграмму и передает запрос базы данных 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 тип диаграммы и данные более явно, но метод проще в использовании, если вам не нужна дополнительная гибкость.

  5. Запустите страницу в браузере.

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

Третий вариант для составления графика — использование файла XML в качестве данных для диаграммы. Это требует, чтобы файл XML также иметь файл схемы (.xsd файл), который описывает структуру XML. Эта процедура показывает, как считывать данные из файла XML.

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

  2. Замените существующий 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>
    
  3. В папке App_Data создайте новый файл XML под названием data.xsd. (Обратите внимание, что расширение на этот раз .xsd.)

  4. Замените существующий 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>
    
  5. В корне веб-сайта создайте новый файл под названием ChartDataXML.cshtml.

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

    @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 возможность работать с объектом. Для получения дополнительной информации смотрите "С помощью заявлений" и полностью квалифицированных имен позже в этой статье.)

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

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

  7. Запустите страницу в браузере.

Tip

"Использование" заявлений и полностью квалифицированных имен

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

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

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

Тем не менее, это громоздким (и подверженных ошибкам), чтобы использовать эти длинные, полностью квалифицированные имена каждый раз, когда вы хотите обратиться к классу или помощнику. Таким образом, чтобы упростить использование имен классов, можно импортировать интересующие вас пространства имен, что обычно является лишь горсткой из множества областей имен в рамках .NET. Если вы импортировали пространство имен, вы можете использоватьChartтолько название класса ()System.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.

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

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

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

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

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

    <!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.

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

Укладка диаграммы

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

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

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

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

  1. Создайте новый файл под названием ChartStyleGreen.cshtml.

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

    @{
        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();
    }
    

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

    var myChart = new Chart(width: 600,
                        height: 400,
                        theme: ChartTheme.Green)
    
  3. Запустите страницу в браузере. Вы видите те же данные, что и раньше, но диаграмма выглядит более полированной:

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

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

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

Вы можете сохранить диаграмму таким образом:

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

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

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

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

  1. В корне вашего сайта, создать файл под названием ShowCachedChart.cshtml.

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

    <!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 только для того чтобы испытать кэширование для этого примера - нет соединения или страницы которую вы нормально включили бы работать с кэшированными диаграммами.

  3. В корне вашего сайта, создать новый файл под названием ChartSaveToCache.cshtml.

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

    @{
        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 параметра — если это настроено на истину, счетчик тайм-аута сбросился каждый раз, когда диаграмма доступна. В этом случае это фактически означает, что срок действия кэша диаграммы истекает через 2 минуты после последнего доступа к диаграмме. (Альтернативой истечению срока действия является абсолютный срок действия, а это означает, что срок действия ввода кэша истекает ровно через 2 минуты после того, как он был помещен в кэш, независимо от того, как часто он был доступен.)

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

    Обратите внимание, что AddTitle в примере метод включает метку времени. (Он добавляет текущую дату DateTime.Now и время — — к названию.)

  5. Создайте новую страницу под названием 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. Как отмечалось ранее, вы обычно не должны иметь страницу, как это. Вы создаете его здесь только для того, чтобы облегчить тестирование кэширования.

  6. Выполнить веб-страницу ShowCachedChart.cshtml в браузере. Страница отображает изображение диаграммы на основе кода, содержащегося в файле ChartSaveToCache.cshtml. Обратите внимание на то, что метка времени говорит в названии диаграммы.

    Описание: Изображение базовой диаграммы с меткой времени в названии диаграммы

  7. Закройте браузер.

  8. Выполнить ShowCachedChart.cshtml снова. Обратите внимание, что метка времени такая же, как и раньше, что указывает на то, что диаграмма не была регенерирована, а была прочитана из кэша.

  9. В ShowCachedChart.cshtml, нажмите на ссылку Clear кэша. Это приведет вас к ClearCache.cshtml, который сообщает, что кэш был очищен.

  10. Нажмите на ссылку Return to ShowCachedChart.cshtml или повторно запустите ShowCachedChart.cshtml от WebMatrix. Обратите внимание, что на этот раз метка времени изменилась, так как кэш был очищен. Поэтому код должен был регенерировать диаграмму и поместить ее обратно в кэш.

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

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

  1. В корне вашего сайта создайте папку под названием * _ChartFiles,* если она еще не существует.

  2. В корне вашего сайта, создать новый файл под названием ChartSave.cshtml.

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

    @{
        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.

  4. Выполнить файл ChartSave.cshtml.

  5. Возвращение в WebMatrix. Обратите внимание, что файл изображений под названием chart01.jpg был сохранен в папке * _ChartFiles.*

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

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

  1. В корне вашего сайта, создать новый файл под названием ChartSaveXml.cshtml.

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

    @{
        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 помощью метода, как вы видели раньше.

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

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

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Display chart from XML</title>
      </head>
      <body>
        <img src="ChartSaveXML.cshtml" />
      </body>
    </html>
    
  4. Выполнить страницу ChartDisplayXMLChart.cshtml. Диаграмма отображается. Обратите внимание на метку времени в названии диаграммы.

  5. Закройте браузер.

  6. В WebMatrix, правой кнопкой кнопку * _chartFiles* папку, нажмите Обновить, а затем открыть папку. Файл XMLChart.xml в этой папке Chart был создан помощником.

    Описание: Папка _ChartFiles, показывающая файл XMLChart.xml, созданный помощником диаграммы.

  7. Повторите страницу ChartDisplayXMLChart.cshtml снова. Диаграмма показывает ту же отметку времени, что и первый раз, когда вы запустили страницу. Это потому, что диаграмма генерируется из XML вы сохранили ранее.

  8. В WebMatrix откройте папку * _ChartFiles* и удалите файл XMLChart.xml.

  9. Выполнить страницу ChartDisplayXMLChart.cshtml еще раз. На этот раз метка времени Chart обновляется, потому что помощнику пришлось воссоздать файл XML. Если вы хотите, проверьте папку * _ChartFiles* и обратите внимание, что файл XML вернулся.

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