Wyświetlanie danych na wykresie z ASP.NET stron sieci Web (Razor)

przez Microsoft

Z tego artykułu dowiesz się, jak używać wykresu do wyświetlania danych w Chart witrynie ASP.NET stron sieci Web (Razor) przy użyciu pomocnika.

Czego się dowiesz:

  • Jak wyświetlić dane na wykresie.
  • Jak stylizować wykresy przy użyciu wbudowanych motywów.
  • Jak zapisywać wykresy i jak je buforować, aby uzyskać lepszą wydajność.

Oto ASP.NET funkcje programowania wprowadzone w artykule:

  • Pomocnik. Chart

Note

Informacje zawarte w tym artykule dotyczą ASP.NET stron sieci Web 1.0 i stron sieci Web 2.

Pomocnik wykresu

Jeśli chcesz wyświetlić dane w formie graficznej, możesz użyć Chart pomocnika. Pomocnik Chart może renderować obraz, który wyświetla dane w różnych typach wykresów. Obsługuje wiele opcji formatowania i etykietowania. Pomocnik Chart może renderować ponad 30 typów wykresów, w tym wszystkie typy wykresów, które mogą być znane z programu Microsoft Excel lub innych narzędzi — wykresy warstwowe, wykresy słupkowe, wykresy kolumnowe, wykresy liniowe i wykresy kołowe, a także bardziej wyspecjalizowane wykresy, takie jak wykresy giełdowe.

Opis wykresu warstwowego: Obraz typu wykresu warstwowego Opis wykresu słupkowego: obraz typu wykresu słupkowego
Opis wykresu kolumnowego: Obraz typu wykresu kolumnowego Opis wykresu liniowego: Obraz typu wykresu liniowego
Opis wykresu kołowego: Obraz typu wykresu kołowego Opis wykresu giełdowego: Obraz typu wykresu giełdowego

Elementy wykresu

Wykresy pokazują dane i dodatkowe elementy, takie jak legendy, osie, serie i tak dalej. Na poniższej ilustracji przedstawiono wiele elementów wykresu, które można dostosować podczas korzystania z Chart pomocnika. W tym artykule pokazano, jak ustawić niektóre (nie wszystkie) z tych elementów.

Opis: obraz przedstawiający elementy wykresu

Tworzenie wykresu na podstawie danych

Dane wyświetlane na wykresie mogą pochodzić z tablicy, z wyników zwróconych z bazy danych lub z danych, które są w pliku XML.

Korzystanie z tablicy

Jak wyjaśniono we wstępie do ASP.NET programowanie stron sieci Web Za pomocą składni Razor,tablica umożliwia przechowywanie kolekcji podobnych elementów w jednej zmiennej. Tablice zawierają dane, które mają zostać uwzględnione na wykresie.

W tej procedurze pokazano, jak można utworzyć wykres na podstawie danych w tablicach przy użyciu domyślnego typu wykresu. Pokazuje również, jak wyświetlić wykres na stronie.

  1. Utwórz nowy plik o nazwie ChartArrayBasic.cshtml.

  2. Zastąp istniejącą zawartość następującymi:

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

    Kod najpierw tworzy nowy wykres i ustawia jego szerokość i wysokość. Tytuł wykresu można określić za pomocą metody. AddTitle Aby dodać dane, AddSeries należy użyć metody. W tym nameprzykładzie należy xValueużyć yValues , AddSeries i parametrów metody. Parametr name jest wyświetlany w legendzie wykresu. Parametr xValue zawiera tablicę danych wyświetlanych wzdłuż osi poziomej wykresu. Parametr yValues zawiera tablicę danych, która jest używana do wykreślenia pionowych punktów wykresu.

    Metoda Write faktycznie renderuje wykres. W takim przypadku, ponieważ nie określono typu Chart wykresu, pomocnik renderuje jego domyślny wykres, który jest wykresem kolumnowym.

  3. Uruchom stronę w przeglądarce. Przeglądarka wyświetli wykres.

Korzystanie z kwerendy bazy danych dla danych wykresu

Jeśli informacje, które chcesz utworzyć na wykresie, znajdują się w bazie danych, można uruchomić kwerendę bazy danych, a następnie użyć danych z wyników do utworzenia wykresu. W tej procedurze pokazano sposób odczytywania i wyświetlania danych z bazy danych utworzonej w artykule Wprowadzenie do pracy z bazą danych w witrynach ASP.NET stron sieci Web.

  1. Dodaj folder Dane aplikacji_ do katalogu głównego witryny sieci Web, jeśli folder jeszcze nie istnieje.

  2. W folderze Dane aplikacji_ dodaj plik bazy danych o nazwie SmallBakery.sdf opisany w aplikacji Wprowadzenie do pracy z bazą danych w witrynach ASP.NET stron sieci Web.

  3. Utwórz nowy plik o nazwie ChartDataQuery.cshtml.

  4. Zastąp istniejącą zawartość następującymi:

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

    Kod najpierw otwiera bazę danych SmallBakery i dbprzypisuje ją do zmiennej o nazwie . Ta zmienna Database reprezentuje obiekt, który może służyć do odczytu i zapisu w bazie danych. Następnie kod uruchamia kwerendę SQL, aby uzyskać nazwę i cenę każdego produktu. Kod tworzy nowy wykres i przekazuje do niego kwerendę DataBindTable bazy danych, wywołując metodę wykresu. Ta metoda przyjmuje dwa dataSource parametry: parametr jest dla danych xField z kwerendy, a parametr pozwala ustawić, która kolumna danych jest używana dla osi x wykresu.

    Jako alternatywę dla DataBindTable korzystania z metody, można użyć AddSeries metody Chart pomocnika. Metoda AddSeries umożliwia ustawienie xValue i yValues parametry. Na przykład zamiast używać DataBindTable metody w ten sposób:

    .DataBindTable(data, "Name")
    

    Można użyć AddSeries metody następującej:

    .AddSeries("Default",
        xValue: data, xField: "Name",
        yValues: data, yFields: "Price")
    

    Oba renderuj te same wyniki. Metoda AddSeries jest bardziej elastyczna, ponieważ można określić typ wykresu i dane bardziej jawnie, ale DataBindTable metoda jest łatwiejsza w użyciu, jeśli nie potrzebujesz dodatkowej elastyczności.

  5. Uruchom stronę w przeglądarce.

Korzystanie z danych XML

Trzecią opcją tworzenia wykresów jest użycie pliku XML jako danych wykresu. Wymaga to, aby plik XML miał również plik schematu (plikxsd), który opisuje strukturę XML. W tej procedurze pokazano sposób odczytywania danych z pliku XML.

  1. W folderze Dane aplikacji_ utwórz nowy plik XML o nazwie data.xml.

  2. Zastąp istniejący kod XML następującym, czyli niektórymi danymi XML dotyczącymi pracowników w fikcyjnej firmie.

    <?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. W folderze Dane aplikacji_ utwórz nowy plik XML o nazwie data.xsd. (Należy zauważyć, że rozszerzenie tym razem jest .xsd.)

  4. Zastąp istniejący kod XML następującymi:

    <?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. W katalogu głównym witryny należy utworzyć nowy plik o nazwie ChartDataXML.cshtml.

  6. Zastąp istniejącą zawartość następującymi:

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

    Kod najpierw tworzy DataSet obiekt. Ten obiekt służy do zarządzania danymi odczytanych z pliku XML i organizowania ich zgodnie z informacjami w pliku schematu. (Należy zauważyć, że górna using SystemDataczęść kodu zawiera instrukcję . Jest to wymagane, aby móc pracować DataSet z obiektem. Aby uzyskać więcej informacji, zobacz "Korzystanie z" instrukcji i w pełni kwalifikowanych nazw w dalszej części tego artykułu).

    Następnie kod tworzy DataView obiekt na podstawie zestawu danych. Widok danych zawiera obiekt, który wykres może powiązać z — czyli odczytu i wydruku. Wykres wiąże się z danymi AddSeries przy użyciu metody, jak wcześniej podczas tworzenia wykresów xValue yValues danych tablicy, DataView z tą różnicą, że tym razem parametry i są ustawione na obiekt.

    W tym przykładzie pokazano również, jak określić określony typ wykresu. Po dodaniu danych AddSeries w metodzie chartType parametr jest również ustawiony na wyświetlanie wykresu kołowego.

  7. Uruchom stronę w przeglądarce.

Tip

Instrukcje "Używanie" i w pełni kwalifikowane nazwy

Program .NET Framework, który ASP.NET strony sieci Web ze składnią Razor, składa się z wielu tysięcy składników (klas). Aby można było zarządzać pracą z tymi wszystkimi klasami, są one zorganizowane w przestrzenie nazw, które są trochę jak biblioteki. Na przykład System.Web obszar nazw zawiera klasy, które obsługują System.Xml komunikację przeglądarki/serwera, obszar nazw zawiera klasy, System.Data które są używane do tworzenia i odczytywania plików XML, a obszar nazw zawiera klasy, które umożliwiają pracę z danymi.

Aby uzyskać dostęp do danej klasy w programie .NET Framework, kod musi znać nie tylko nazwę klasy, ale także obszar nazw, w których znajduje się klasa. Na przykład, aby użyć Chart pomocnika, kod musi System.Web.Helpers.Chart znaleźć klasę, która łączySystem.Web.Helpersobszar nazw (Chart) z nazwą klasy ( ). Jest to znane jako w pełni kwalifikowana nazwa klasy — jej pełną, jednoznaczną lokalizację w ramach ogromu programu .NET Framework. W kodzie będzie to wyglądać następująco:

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

Jednak jest to kłopotliwe (i podatne na błędy), aby używać tych długich, w pełni kwalifikowanych nazw za każdym razem, gdy chcesz odwołać się do klasy lub pomocnika. W związku z tym, aby ułatwić korzystanie z nazw klas, można zaimportować przestrzenie nazw, które cię interesują, który jest zwykle tylko kilka spośród wielu obszarów nazw w .NET Framework. Jeśli zaimportowano obszar nazw, można użyć tylkoChartnazwy klasy ( )System.Web.Helpers.Chartzamiast w pełni kwalifikowanej nazwy ( ). Gdy kod jest uruchamiany i napotka nazwę klasy, może wyglądać tylko w przestrzeniach nazw, które zostały zaimportowane, aby znaleźć tę klasę.

Podczas tworzenia stron sieci Web za pomocą ASP.NET stron sieci Web ze składnią Razor zwykle WebPage używasz tego samego zestawu klas za każdym razem, w tym klasy, różnych pomocników itd. Aby zaoszczędzić pracę importowania odpowiednich obszarów nazw przy każdym tworzeniu witryny sieci Web, ASP.NET jest skonfigurowany tak, aby automatycznie importował zestaw podstawowych obszarów nazw dla każdej witryny sieci Web. Dlatego do tej pory nie miałeś do czynienia z obszarami nazw ani importować; wszystkie klasy, z którymi pracowałeś, znajdują się w przestrzeniach nazw, które są już zaimportowane dla Ciebie.

Jednak czasami trzeba pracować z klasą, która nie jest w obszarze nazw, który jest automatycznie importowane dla Ciebie. W takim przypadku można użyć w pełni kwalifikowanej nazwy tej klasy lub ręcznie zaimportować obszar nazw zawierający klasę. Aby zaimportować obszar using nazw,import należy użyć instrukcji (w języku Visual Basic), jak widać w przykładzie wcześniej artykuł.

Na przykład DataSet klasa znajduje System.Data się w obszarze nazw. Obszar System.Data nazw nie jest automatycznie dostępny dla ASP.NET stron Razor. W związku z tym DataSet do pracy z klasą przy użyciu jego w pełni kwalifikowanej nazwy, można użyć kodu w ten sposób:

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

Jeśli musisz używać DataSet klasy wielokrotnie można zaimportować obszar nazw tak, a następnie użyć tylko nazwę klasy w kodzie:

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

Można dodać using instrukcje dla innych obszarów nazw programu .NET Framework, do których chcesz się odwołać. Jednak, jak wspomniano, nie trzeba tego często, ponieważ większość klas, które będą pracować z są w przestrzenie nazw, które są importowane automatycznie przez ASP.NET do użycia w .cshtml i .vbhtml stron.

Wyświetlanie wykresów wewnątrz strony sieci Web

W przykładach, które widziałeś do tej pory, tworzysz wykres, a następnie wykres jest renderowany bezpośrednio do przeglądarki jako grafika. W wielu przypadkach jednak chcesz wyświetlić wykres jako część strony, a nie tylko sam w przeglądarce. Aby to zrobić wymaga dwuetapowego procesu. Pierwszym krokiem jest utworzenie strony, która generuje wykres, jak już widziałeś.

Drugim krokiem jest wyświetlenie wynikowego obrazu na innej stronie. Aby wyświetlić obraz, należy <img> użyć elementu HTML, w taki sam sposób, jak do wyświetlania dowolnego obrazu. Jednak zamiast odwoływać się do pliku jpg lub <img> png, element odwołuje się do Chart pliku cshtml, który zawiera pomocnika, który tworzy wykres. Po uruchomieniu strony wyświetlania <img> element pobiera Chart dane wyjściowe pomocnika i renderuje wykres.

  1. Utwórz plik o nazwie ShowChart.cshtml.

  2. Zastąp istniejącą zawartość następującymi:

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

    Kod używa <img> tego elementu do wyświetlania wykresu utworzonego wcześniej w pliku ChartArrayBasic.cshtml.

  3. Uruchom stronę internetową w przeglądarce. Plik ShowChart.cshtml wyświetla obraz wykresu na podstawie kodu zawartego w pliku ChartArrayBasic.cshtml.

Stylizowanie wykresu

Pomocnik Chart obsługuje dużą liczbę opcji, które umożliwiają dostosowanie wyglądu wykresu. Można ustawić kolory, czcionki, obramowania i tak dalej. Łatwym sposobem dostosowania wyglądu wykresu jest użycie motywu. Motywy to zbiory informacji określające sposób renderowania wykresu przy użyciu czcionek, kolorów, etykiet, palet, obramowań i efektów. (Należy zauważyć, że styl wykresu nie wskazuje typu wykresu).

W poniższej tabeli wymieniono wbudowane motywy.

motyw Opis
Vanilla Wyświetla czerwone kolumny na białym tle.
Blue Wyświetla niebieskie kolumny na niebieskim tle gradientu.
Green Wyświetla niebieskie kolumny na zielonym tle gradientu.
Yellow Wyświetla pomarańczowe kolumny na żółtym tle gradientu.
Vanilla3D Wyświetla czerwone kolumny 3-W na białym tle.

Można określić motyw, który ma być używany podczas tworzenia nowego wykresu.

  1. Utwórz nowy plik o nazwie ChartStyleGreen.cshtml.

  2. Zastąp istniejącą zawartość strony następującymi:

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

    Ten kod jest taki sam jak we wcześniejszym przykładzie, theme który używa bazy Chart danych dla danych, ale dodaje parametr podczas tworzenia obiektu. Poniżej przedstawiono zmieniony kod:

    var myChart = new Chart(width: 600,
                        height: 400,
                        theme: ChartTheme.Green)
    
  3. Uruchom stronę w przeglądarce. Widzisz te same dane, co poprzednio, ale wykres wygląda bardziej dopracowany:

Zapisywanie wykresu

Korzystając z Chart pomocnika, jak do tej pory w tym artykule, pomocnik ponownie tworzy wykres od podstaw za każdym razem, gdy jest wywoływany. W razie potrzeby kod wykresu również ponownie wysyła zapytanie do bazy danych lub ponownie odczytuje plik XML, aby uzyskać dane. W niektórych przypadkach może to być złożona operacja, na przykład jeśli baza danych, która jest kwerenda jest duża lub jeśli plik XML zawiera dużo danych. Nawet jeśli wykres nie zawiera dużej ilości danych, proces dynamicznego tworzenia obrazu zajmuje zasoby serwera, a jeśli wiele osób żąda strony lub stron, które wyświetlają wykres, może mieć wpływ na wydajność witryny.

Aby zmniejszyć potencjalny wpływ tworzenia wykresu na wydajność, można utworzyć wykres za pierwszym razem, gdy go potrzebujesz, a następnie zapisać go. Gdy wykres jest potrzebny ponownie, zamiast go ponownie, można po prostu pobrać zapisaną wersję i renderować ją.

Wykres można zapisać w następujących sposób:

  • Buforowanie wykresu w pamięci komputera (na serwerze).
  • Zapisz wykres jako plik obrazu.
  • Zapisz wykres jako plik XML. Ta opcja umożliwia zmodyfikowanie wykresu przed jego zapisaniem.

Buforowanie wykresu

Po utworzeniu wykresu można go buforować. Buforowanie wykresu oznacza, że nie musi być ponownie utworzony, jeśli musi być wyświetlany ponownie. Podczas zapisywania wykresu w pamięci podręcznej, należy nadać mu klucz, który musi być unikatowy dla tego wykresu.

Wykresy zapisane w pamięci podręcznej mogą zostać usunięte, jeśli na serwerze zabraknie pamięci. Ponadto pamięć podręczna jest czyszczona, jeśli aplikacja zostanie ponownie uruchomiona z jakiegokolwiek powodu. W związku z tym standardowy sposób pracy z buforowanego wykresu jest zawsze sprawdzić najpierw, czy jest on dostępny w pamięci podręcznej, a jeśli nie, a następnie utworzyć lub ponownie utworzyć go.

  1. W katalogu głównym witryny należy utworzyć plik o nazwie ShowCachedChart.cshtml.

  2. Zastąp istniejącą zawartość następującymi:

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

    Tag <img> zawiera src atrybut, który wskazuje na plik ChartSaveToCache.cshtml i przekazuje klucz do strony jako ciąg zapytania. Klucz zawiera wartość "myChartKey". Plik ChartSaveToCache.cshtml zawiera Chart pomocnika, który tworzy wykres. Utwórz tę stronę za chwilę.

    Na końcu strony znajduje się łącze do strony o nazwie ClearCache.cshtml. To jest strona, którą wkrótce utworzysz. ClearCache.cshtml jest potrzebny tylko do testowania buforowania w tym przykładzie — nie jest to łącze lub strona, które normalnie zawierasz podczas pracy z buforowanymi wykresami.

  3. W katalogu głównym witryny należy utworzyć nowy plik o nazwie ChartSaveToCache.cshtml.

  4. Zastąp istniejącą zawartość następującymi:

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

    Kod najpierw sprawdza, czy wszystko zostało przekazane jako wartość klucza w ciągu zapytania. Jeśli tak, kod próbuje odczytać wykres z pamięci GetFromCache podręcznej, wywołując metodę i przekazując ją klucz. Jeśli okaże się, że nie ma nic w pamięci podręcznej pod tym kluczem (co miałoby miejsce po raz pierwszy, że wykres jest wymagany), kod tworzy wykres jak zwykle. Po zakończeniu wykresu kod zapisuje go w SaveToCachepamięci podręcznej, wywołując program . Ta metoda wymaga klucza (więc wykres może być wymagane później) i czas, który wykres powinien być zapisany w pamięci podręcznej. (Dokładny czas buforowania wykresu zależy od tego, jak często dane, które reprezentuje, mogą ulec zmianie). Metoda SaveToCache wymaga również slidingExpiration parametru — jeśli jest ustawiona na true, licznik limitu czasu jest resetowany za każdym razem, gdy wykres jest dostępny. W takim przypadku oznacza to, że wpis pamięci podręcznej wykresu wygasa 2 minuty po ostatnim czasie, gdy ktoś uzyskał dostęp do wykresu. (Alternatywą dla wygasania przesuwnego jest wygaśnięcie bezwzględne, co oznacza, że wpis pamięci podręcznej wygaśnie dokładnie 2 minuty po umieszczeniu go w pamięci podręcznej, bez względu na to, jak często był uzyskiwał dostęp).

    Na koniec kod używa WriteFromCache metody do pobierania i renderowania wykresu z pamięci podręcznej. Należy zauważyć, że if ta metoda jest poza blokiem, który sprawdza pamięć podręczną, ponieważ pobierze wykres z pamięci podręcznej, czy wykres był tam, aby rozpocząć lub musiał zostać wygenerowany i zapisany w pamięci podręcznej.

    Należy zauważyć, że AddTitle w przykładzie metoda zawiera sygnaturę czasową. (Dodaje bieżącą datę i godzinę DateTime.Now — — do tytułu).

  5. Utwórz nową stronę o nazwie ClearCache.cshtml i zastąp jej zawartość następującymi:

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

    Ta strona używa WebCache pomocnika do usunięcia wykresu, który jest buforowany w pliku ChartSaveToCache.cshtml. Jak wspomniano wcześniej, zwykle nie trzeba mieć taką stronę. Tworzysz go tutaj tylko po to, aby ułatwić testowanie buforowania.

  6. Uruchom stronę internetową ShowCachedChart.cshtml w przeglądarce. Strona wyświetla obraz wykresu na podstawie kodu zawartego w pliku ChartSaveToCache.cshtml. Zwróć uwagę na to, co sygnatura czasowa mówi w tytule wykresu.

    Opis: obraz wykresu podstawowego z sygnaturą czasową w tytule wykresu

  7. Zamknij okno przeglądarki.

  8. Uruchom ponownie plik ShowCachedChart.cshtml. Należy zauważyć, że sygnatura czasowa jest taka sama jak poprzednio, co oznacza, że wykres nie został ponownie wygenerowany, ale zamiast tego został odczytany z pamięci podręcznej.

  9. W pliku ShowCachedChart.cshtmlkliknij łącze Wyczyść pamięć podręczną. Spowoduje to przejście do pliku ClearCache.cshtml, który informuje, że pamięć podręczna została wyczyszczona.

  10. Kliknij łącze Powrót do programu ShowCachedChart.cshtml lub ponownie uruchom plik ShowCachedChart.cshtml z programu WebMatrix. Należy zauważyć, że tym razem sygnatura czasowa została zmieniona, ponieważ pamięć podręczna została wyczyszczona. W związku z tym kod musiał ponownie wygenerować wykres i umieścić go z powrotem w pamięci podręcznej.

Zapisywanie wykresu jako pliku obrazu

Wykres można również zapisać jako plik obrazu (na przykład jako plik jpg) na serwerze. Następnie można użyć pliku obrazu w taki sposób, jak dowolny obraz. Zaletą jest to, że plik jest przechowywany, a nie zapisywany w tymczasowej pamięci podręcznej. Można zapisać nowy obraz wykresu w różnym czasie (na przykład co godzinę), a następnie zachować stały zapis zmian, które występują w czasie. Należy zauważyć, że należy upewnić się, że aplikacja sieci web ma uprawnienia do zapisywania pliku w folderze na serwerze, na którym chcesz umieścić plik obrazu.

  1. W katalogu głównym witryny należy utworzyć folder o nazwie * _ChartFiles,* jeśli jeszcze nie istnieje.

  2. W katalogu głównym witryny utwórz nowy plik o nazwie ChartSave.cshtml.

  3. Zastąp istniejącą zawartość następującymi:

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

    Kod najpierw sprawdza, czy plik jpg istnieje, File.Exists wywołując metodę. Jeśli plik nie istnieje, kod tworzy Chart nowy z tablicy. Tym razem kod wywołuje Save metodę i path przekazuje parametr, aby określić ścieżkę pliku i nazwę pliku, gdzie zapisać wykres. W treści strony <img> element używa ścieżki do wskazywać plik jpg do wyświetlenia.

  4. Uruchom plik ChartSave.cshtml.

  5. Wróć do programu WebMatrix. Należy zauważyć, że plik obrazu o nazwie chart01.jpg został zapisany w folderze * _ChartFiles.*

Zapisywanie wykresu jako pliku XML

Na koniec można zapisać wykres jako plik XML na serwerze. Zaletą używania tej metody za pomocą buforowania wykresu lub zapisywania wykresu w pliku jest możliwość zmodyfikowania pliku XML przed wyświetleniem wykresu, jeśli chcesz. Aplikacja musi mieć uprawnienia do odczytu/zapisu dla folderu na serwerze, na którym chcesz umieścić plik obrazu.

  1. W katalogu głównym witryny utwórz nowy plik o nazwie ChartSaveXml.cshtml.

  2. Zastąp istniejącą zawartość następującymi:

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

    Ten kod jest podobny do kodu, który został wcześniej widziałem do przechowywania wykresu w pamięci podręcznej, z tą różnicą, że używa pliku XML. Kod najpierw sprawdza, czy plik XML istnieje, File.Exists wywołując metodę. Jeśli plik istnieje, kod tworzy Chart nowy obiekt i przekazuje themePath nazwę pliku jako parametr. Spowoduje to utworzenie wykresu na podstawie tego, co znajduje się w pliku XML. Jeśli plik XML jeszcze nie istnieje, kod tworzy wykres jak SaveXml zwykle, a następnie wywołuje, aby go zapisać. Wykres jest renderowany Write przy użyciu metody, jak widzieliśmy wcześniej.

    Podobnie jak w odniesieniu do strony, która pokazywała buforowanie, ten kod zawiera sygnaturę czasową w tytule wykresu.

  3. Utwórz nową stronę o nazwie ChartDisplayXMLChart.cshtml i dodaj do niej następujące znaczniki:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Display chart from XML</title>
      </head>
      <body>
        <img src="ChartSaveXML.cshtml" />
      </body>
    </html>
    
  4. Uruchom stronę ChartDisplayXMLChart.cshtml. Zostanie wyświetlony wykres. Zanotuj sygnaturę czasową w tytule wykresu.

  5. Zamknij okno przeglądarki.

  6. W aplikacji WebMatrix kliknij prawym przyciskiem myszy folder * _ChartFiles,* kliknij polecenie Odśwież, a następnie otwórz folder. Plik XMLChart.xml w tym folderze Chart został utworzony przez pomocnika.

    Opis: folder _ChartFiles z plikiem XMLChart.xml utworzonym przez pomocnika wykresu.

  7. Ponownie uruchom stronę ChartDisplayXMLChart.cshtml. Wykres zawiera ten sam znacznik czasu, co przy pierwszym uruchomieniu strony. Dzieje się tak dlatego, że wykres jest generowany z kodu XML zapisanego wcześniej.

  8. W aplikacji WebMatrix otwórz folder * _ChartFiles* i usuń plik XMLChart.xml.

  9. Uruchom ponownie stronę ChartDisplayXMLChart.cshtml. Tym razem sygnatura czasowa Chart jest aktualizowana, ponieważ pomocnik musiał odtworzyć plik XML. Jeśli chcesz, sprawdź folder * _ChartFiles* i zwróć uwagę, że plik XML powraca.

Dodatkowe zasoby