7 – Zobrazení dat v grafu

 
 

 

Tato kapitola vysvětluje, jak data zobrazit v grafu.

V předchozích kapitolách jste se dozvěděli, jak zobrazit data ručně nebo v mřížce. Tato kapitola vysvětluje, jak data zobrazit s využitím pomocné třídy Chart (Graf).

Co se naučíte:

V této kapitole budou představeny následující funkce programování pomocí technologie ASP.NET:

 

 

Pomocná třída Chart

Když budete chtít data zobrazit v grafické podobě, můžete použít pomocnou třídu (helper) Chart (Graf). Pomocná třída Chart (Graf) dokáže vykreslit obrázek zobrazující data v celé řadě různých typů grafů. Podporuje mnoho možností formátování a popisků. Pomocná třída Chart dokáže vykreslit více než 30 typů grafů, včetně všech typů grafů, které možná znáte z aplikace Microsoft Excel nebo jiných nástrojů — plošných, pruhových, sloupcových, spojnicových nebo výsečových grafů, spolu se specializovanějšími grafy, jako jsou například burzovní grafy.


Plošný graf

ch07_charts-01


Pruhový graf

ch07_charts-02


Sloupcový graf

ch07_charts-03


Spojnicový graf

ch07_charts-04


Výsečový graf

ch07_charts-05


Burzovní graf

ch07_charts-09

Prvky grafu

V grafu jsou zobrazena data spolu s dalšími prvky, jako jsou například legenda, osy, řady atd. Následující obrázek zachycuje mnoho prvků grafu, které je možné přizpůsobit s použitím pomocné třídy Chart (Graf). Tato kapitola ukazuje, jak nastavit některé (ne všechny) z těchto prvků.

ch07_charts-10

Vytvoření grafu z dat

Data zobrazená v grafu mohou pocházet z pole, z výsledků vrácených z databáze nebo z dat v souboru XML.

Použití pole

Jak vysvětluje kapitola 2 – úvod do programování webů ASP.NET s použitím syntaxe Razor, pole umožňuje uložit kolekci podobných položek v jedné proměnné. Pole mohou obsahovat data, která chcete v grafu zahrnout.

Tento postup ukazuje, jak vytvořit graf z dat uložených v polích s využitím výchozího typu grafu. Ukazuje také, jak graf zobrazit na stránce.

  1. Vytvořte nový soubor s názvem ChartArrayBasic.cshtml.
  2. Stávající kód nahraďte následujícím kódem:
    @{ 
        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(); 
    }

    Kód nejprve vytvoří nový graf a nastaví jeho šířku a výšku. Název grafu je určen pomocí metody AddTitle (Přidat název). Pro přidání dat slouží metoda AddSeries (Přidat řadu). V tomto příkladu použijeme parametry name (název), xValue (hodnota x) a yValues (hodnoty y) metody AddSeries (Přidat řadu). Parametr name (název) je zobrazen v legendě grafu. Parametr xValue (hodnota x) obsahuje pole s daty, která jsou zobrazena podél vodorovné osy grafu. Parametr yValues (hodnoty y) obsahuje pole s daty, pomocí nichž jsou vyneseny svislé body grafu.

    Metoda Write (Vypsat) provede vlastní vykreslení grafu. V tomto případě, protože jsme neurčili typ grafu, pomocná třída (helper) Chart (Graf) vykreslí výchozí typ grafu, kterým je sloupcový graf.

  3. Spusťte stránku v prohlížeči. (Před jejím spuštěním ověřte, zda je stránka vybrána v pracovním prostředí Files – Soubory.) Prohlížeč zobrazí graf.

    ch07_charts-11

Použití databázového dotazu pro data grafu

Pokud se informace, které chcete zobrazit v grafu, nacházejí v databázi, můžete provést databázový dotaz a poté k vytvoření grafu použít data z jeho výsledků. Tento postup ukazuje, jak přečíst a zobrazit data vytvořená v předchozím příkladu.

  1. Pokud ještě neexistuje, přidejte do kořene webu složku App_Data
  2. Do složky App_Data přidejte databázový soubor s názvem SmallBakery.sdf, který jste vytvořili v kapitole 5 – Práce s daty.
  3. Vytvořte nový soubor s názvem ChartDataQuery.cshtml.
  4. Stávající kód nahraďte následujícím kódem:
     
    @{ 
        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(); 
    }

    Tento kód nejprve otevře databázi SmallBakery (Malé pekařství) a přiřadí ji proměnné s názvem db. Tato proměnná představuje objekt Database (Databáze), pomocí něhož je možné z databáze číst a zapisovat do ní. V dalším kroku kód spustí příkaz jazyka SQL, aby získal názvy a ceny všech produktů. Kód vytvoří nový graf a předá mu databázový dotaz pomocí volání metody DataBindTable (Navázat data tabulky). Tato metoda přijímá dva parametry: parametr dataSource (zdroj dat) je určen pro data z dotazu a parametr xField (pole x) umožňuje nastavit, který datový sloupec má být použit pro osu x grafu.

    Alternativou k použití metody DataBindTable (Navázat data tabulky) je použití metody AddSeries (Přidat řadu) pomocné třídy Chart (Graf). Metoda AddSeries (Přidat řadu) umožňuje nastavit parametry xValue (hodnota x) a yValues (hodnoty y). Místo takovéhoto použití metody DataBindTable (Navázat data tabulky):

    .DataBindTable(data, "Name")

    je například možné takto použít metodu AddSeries (Přidat řadu):

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

    Obě metody vykreslí stejné výsledky. Metoda AddSeries (Přidat řadu) je flexibilnější, protože umožňuje přesněji určit typ grafu a jeho data, ale metoda DataBindTable (Navázat data tabulky) se snadněji používá, pokud není zapotřebí dodatečná flexibilita.

  5. Spusťte stránku v prohlížeči.

    ch07_charts-12

Použití dat ve formátu XML

Třetí možností pro vytvoření grafu je použít soubor XML jako data pro graf. To vyžaduje, aby pro soubor XML byl k dispozici také soubor schématu (soubor XSD) popisující strukturu dat ve formátu XML. Tento postup ukazuje, jak načíst data ze souboru XML.

  1. Ve složce App_Data vytvořte nový soubor XML s názvem data.xml.
  2. Stávající data ve formátu XML nahraďte následujícím kódem, který představuje data ve formátu XML o zaměstnancích fiktivní společnosti.
    <?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. Ve složce App_Data vytvořte nový soubor XML s názvem data.xsd. (Všimněte si, že přípona je tentokrát XSD.)
  4. Stávající data ve formátu XML nahraďte následujícími daty:
    <?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. V kořenové složce webu vytvořte nový soubor s názvem ChartDataXML.cshtml.
  6. Stávající kód nahraďte následujícím kódem:
    @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(); 
    }

    Kód nejprve vytvoří objekt DataSet (Sada dat). Pomocí tohoto objektu je možné řídit data načtená ze souboru XML a uspořádat je podle informací v souboru schématu. (Všimněte si, že horní část kódu obsahuje příkaz using SystemData. Tento příkaz je zapotřebí, abychom mohli pracovat s objektem DataSet (Sada dat). Více informace najdete na postranním panelu Příkazy Using a plně kvalifikované názvy.)

    Dále kód vytvoří objekt DataView (Zobrazení dat) založený na sadě dat. Zobrazení dat představuje objekt, na který se graf může navázat – může z něj číst a vykreslit jej. K navázání grafu na data slouží metoda AddSeries (Přidat řadu), jak jste již viděli při vytvoření grafu z dat uložených v poli. Tentokrát jsou ale parametry xValue (hodnota x) a yValues (hodnoty y) nastaveny na objekt DataView (Zobrazení dat).

    Tento příklad také ukazuje, jak určit konkrétní typ grafu. Při přidání dat v metodě AddSeries je nastaven také parametr chartType (typ grafu), aby byl zobrazen výsečový graf.

  7. Spusťte stránku v prohlížeči.

    ch07_charts-13

Zobrazení grafů na webové stránce

V příkladech, se kterými jste se doposud mohli seznámit, jsme vytvořili graf a tento graf byl poté přímo odeslán prohlížeči jako grafický soubor. V mnoha případech ale budete chtít graf zobrazit jako součást stránky, ne jen sám o sobě v prohlížeči. To vyžaduje proces zahrnující dva kroky. Prvním krokem je vytvořit stránku, která graf vygeneruje, jak jste již viděli.

Druhým krokem je zobrazit výsledný obrázek v další stránce. Pro zobrazení obrázku použijete element <img> jazyka HTML, stejně jako pro zobrazení libovolného jiného obrázku. Místo odkazu na soubor JPG nebo PNG se ale element <img> bude odkazovat na soubor CSHTML obsahující pomocnou třídu Chart (Graf), který graf vytváří. Při spuštění stránky element <img> získá výstup pomocné třídy Chart a graf vykreslí.

 

ch7_datachart-18

 

  1. Vytvořte soubor s názvem ShowChart.cshtml.
  2. Stávající kód nahraďte následujícím kódem:
    <!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>

    Tento kód pomocí elementu <img> zobrazí graf, který jste již dříve vytvořili v souboru ChartArrayBasic.cshtml.

  3. Spusťte webovou stránku v prohlížeči. Soubor ShowChart.cshtml zobrazí obrázek grafu na základě kódu obsaženého v souboru ChartArrayBasic.cshtml.

Upravení stylu grafu

Pomocná třída (helper) Chart (Graf) podporuje celou řadu možností pro přizpůsobení vzhledu grafu. Můžete nastavit barvy, písma, ohraničení atd. Snadným způsobem přizpůsobení vzhledu grafu je použití motivu. Motivy jsou kolekce informací určujících, jak má být graf vykreslen s použitím písem, barev, popisků, palet, ohraničení a efektů. (Všimněte si, že styl grafu neurčuje typ grafu.)

V následující tabulce jsou uvedeny předdefinované motivy.

Motiv Popis
Vanilla (Vanilkový) Zobrazuje červené sloupce na bílém pozadí.
Blue (Modrý) Zobrazuje modré sloupce na pozadí s modrým přechodem.
Green (Zelený) Zobrazuje modré sloupce na pozadí se zeleným přechodem.
Yellow (Žlutý) Zobrazuje oranžové sloupce na pozadí se žlutým přechodem.
Vanilla3D (Trojrozměrný vanilkový) Zobrazuje trojrozměrné červené sloupce na bílém pozadí.

Při vytvoření grafu můžete určit, jaký motiv má být použit.

  1. Vytvořte nový soubor s názvem ChartStyleGreen.cshtml.
  2. Nahraďte výchozí kód značkovacího jazyka a programový kód ve stránce následujícím kódem:
    @{ 
        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(); 
    }

    Jedná se o stejný kód jako v předchozím příkladu, který data získává z databáze, ale je v něm přidán parametr theme (motiv) při vytvoření objektu Chart (Graf). Následující fragment ukazuje změněný kód:

    var myChart = new Chart(width: 600, 
                        height: 400, 
                        theme: ChartTheme.Green)
  3. Spusťte stránku v prohlížeči. Uvidíte stejná data jako dříve, ale graf vypadá úhledněji:

    ch07_charts-14

Uložení grafu

Jak jste zatím v této kapitole mohli vidět, pomocná třída Chart (Graf) při každém vyvolání graf znovu vytvoří. Pokud je to zapotřebí, kód pro vykreslení grafu také znovu provede dotaz v databázi nebo nebo znovu načte data ze souboru XML. V některých případech se může jednat o složitou operaci, například pokud je dotaz prováděn ve velké databázi nebo pokud soubor XML obsahuje velké množství dat. I v případě, že graf nemusí pracovat s velkým množstvím dat, proces dynamického vytvoření obrázku zabírá prostředky na serveru a pokud si stránku nebo stránky zobrazující graf vyžádá velký počet uživatelů, může to mít dopad na výkon webu.

Abyste snížili možný dopad na výkon, který vytvoření grafu může mít, můžete graf vytvořit, když ho budete poprvé potřebovat, a poté ho uložit. Když je graf opět zapotřebí, nemusíte jej znovu generovat, ale můžete jednoduše načíst a vykreslit jeho uloženou verzi.

Graf můžete uložit s použitím následujících způsobů:

Zapsání grafu do mezipaměti

Po vytvoření grafu jej můžete zapsat do mezipaměti. Když je graf zapsán do mezipaměti, znamená to, že nemusí být znovu vytvořen, když je třeba ho opět zobrazit. Při uložení grafu do mezipaměti mu přidělíte klíč, který musí být pro tento graf jedinečný.

Grafy zapsané do mezipaměti z ní mohou být odstraněny, pokud server bude mít nedostatek paměti. Mezipaměť je také vymazána, pokud je nutné aplikaci z libovolného důvodu restartovat. Standardním postupem při práci s grafy zapsanými do mezipaměti je proto vždy nejdříve ověřit, zda je graf v mezipaměti k dispozici, a pokud není, je nutné ho vytvořit nebo znovu vytvořit.

  1. V kořenové složce svého webu vytvořte soubor s názvem ShowCachedChart.cshtml.
  2. Stávající kód nahraďte následujícím kódem:
    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>Chart Example</title> 
        </head> 
    <body> 
        <h1>Chart Example</h1> 
        <img src="ChartSaveToCache.cshtml?key=myChartKey" /> 
    </body> 
    </html>

    Značka <img> zahrnuje atribut src, který se odkazuje na soubor ChartSaveToCache.cshtml a předává stránce klíč jako řetězec dotazu. Klíč obsahuje hodnotu "myChartKey" (klíč mého grafu). Soubor ChartSaveToCache.cshtml obsahuje pomocnou třídu Chart (Graf), která graf vytvoří. Tuto stránku vytvoříme v dalším kroku.

  3. V kořenové složce svého webu vytvořte nový soubor s názvem ChartSaveToCache.cshtml.
  4. Stávající kód nahraďte následujícím kódem:
    @{ 
        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); 
        } 
    }

    Kód nejprve ověří, zda byla v řetězci dotazu předána hodnota klíče. Pokud ano, kód se pokusí načíst graf z mezipaměti tak, že vyvolá metodu GetFromCache (Získat z mezipaměti) a klíč jí předá. V případě, že v mezipaměti se nic pro tento klíč nenachází (což se stane, když je graf vyžádán poprvé), kód graf vytvoří obvyklým způsobem. Když je graf hotový, kód jej zapíše do mezipaměti pomocí volání metody SaveToCache (Zapsat do mezipaměti). Tato metoda vyžaduje klíč (aby graf bylo možné později vyžádat) a dobu, po kterou má graf být v mezipaměti zapsán. (Na jak dlouhou dobu budete graf do mezipaměti zapisovat, závisí na tom, jak často se podle vašeho očekávání budou měnit data, která představuje.) Metoda SaveToCache (Zapsat do mezipaměti) také vyžaduje parametr slidingExpiration (klouzavá doba vypršení) — pokud je nastaven na hodnotu true (pravda), je čítač doby vypršení resetován při každém přístupu k grafu. To vlastně znamená, že platnost položky grafu v mezipaměti vyprší 2 minuty poté, co ke grafu někdo naposled přistoupil. (Alternativou klouzavé doby vypršení je absolutní doba vypršení, která znamená, že platnost položky v mezipaměti vyprší přesně 2 minuty po jejím vložení do mezipaměti, bez ohledu na to, jak často k ní uživatelé budou přistupovat.)

    Na závěr kód pomocí metody WriteFromCache (Vypsat z mezipaměti) graf načte z mezipaměti a vykreslí. Všimněte si, že tato metoda se nachází mimo blok if, který ověřuje přítomnost grafu v mezipaměti, protože tato metoda graf z mezipaměti získá bez ohledu na to, zda tam již byl, nebo musel být vygenerován a do mezipaměti zapsán.

    Všimněte si, že metoda AddTitle (Přidat název) použitá v příkladu zahrnuje časové razítko. (To do názvu přidává aktuální datum a čas — DateTime.Now.)

  5. Spusťte webovou stránku ShowCachedChart.cshtml v prohlížeči. Soubor zobrazí obrázek grafu na základě kódu obsaženého v souboru ChartSaveToCache.cshtml. Všimněte si toho, jaké časové razítko je uvedeno v názvu grafu.

    ch07_charts-15

  6. Zavřete prohlížeč.
  7. Spusťte znovu stránku ShowCachedChart.cshtml. Všimněte si, že časové razítko je stejné jako předtím, což ukazuje, že graf nebyl znovu vygenerován, ale byl načten z mezipaměti.
  8. V prostředí WebMatrix ve skupině Site (Web) na kartě Home (úvod) pásu karet klikněte na položku Restart (Restartovat). Tím bude zastaven a znovu spuštěn webový server IIS Express a v důsledku toho bude restartována vaše webová aplikace.

    ch07_charts-16

    Případně můžete také počkat dvě minuty, dokud nevyprší platnost položky v mezipaměti.

  9. Spusťte znovu stránku ShowCachedChart.cshtml. Všimněte si, že časové razítko se změnilo, protože restart aplikace způsobí také vymazání mezipaměti. Kód proto graf musel znovu vygenerovat a zapsat jej znovu do mezipaměti.

Uložení grafu jako souboru obrázku

Graf můžete také uložit jako soubor obrázku na serveru (například soubor JPG). Tento soubor obrázku pak můžete použít stejně jako libovolný jiný obrázek. Výhodou je, že místo zápisu do přechodné mezipaměti je soubor uložen. Nový obrázek grafu můžete ukládat v různých časových intervalech (například každou hodinu) a udržovat tak trvalý záznam změn, ke kterým v průběhu času došlo. Všimněte si, že musíte ověřit, zda vaše webová aplikace má oprávnění pro uložení souboru do složky na serveru, do které chcete soubor obrázku umístit.

  1. Pokud ještě neexistuje, v kořenu webu vytvořte složku s názvem _ChartFiles.
  2. V kořenové složce svého webu vytvořte nový soubor s názvem ChartSave.cshtml.
  3. Stávající kód nahraďte následujícím kódem:
    @{ 
        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>

    Kód nejprve ověří, zda soubor JPG existuje, pomocí volání metody File.Exists (Soubor.Existuje). Pokud soubor neexistuje, kód vytvoří z pole nový objekt Chart (Graf). Tentokrát kód zavolá metodu Save (Uložit) a předá jí parametr path (cesta), obsahující cestu k souboru a jeho název, které určují, kde má být graf uložen. Element <img> v těle stránky tuto cestu používá jako odkaz na soubor JPG, který má být zobrazen.

  4. Spusťte soubor ChartSave.cshtml.

Uložení grafu jako souboru XML

Poslední možností je uložení grafu jako souboru XML na serveru. Výhoda použití tohoto způsobu oproti zápisu grafu do mezipaměti nebo uložení grafu do souboru spočívá v tom, že v případě potřeby můžete kód XML před zobrazením grafu upravit. Vaše aplikace musí mít oprávnění pro čtení a zápis pro složku na serveru, do které chcete soubor XML umístit.

  1. V kořenové složce svého webu vytvořte nový soubor s názvem ChartSaveXml.cshtml.
  2. Stávající kód nahraďte následujícím kódem:
    @{ 
        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(); 
    }

    Tento kód se podobá výše uvedenému kódu pro zápis grafu do mezipaměti s tím rozdílem, že používá soubor XML. Kód nejprve ověří, zda soubor XML existuje, pomocí volání metody File.Exists (Soubor.Existuje). Pokud soubor existuje, kód vytvoří nový objekt Chart (Graf) a předá název souboru jako parametr themePath (cesta motivu). Tím je graf vytvořen na základě obsahu souboru XML. Pokud soubor XML ještě neexistuje, kód graf vytvoří obvyklým způsobem a poté zavolá metodu SaveXml (Uložit XML) pro jeho uložení. Graf je vykreslen pomocí metody Write (Vypsat), jak jste už viděli dříve.

    Stejně jako u stránky, která demonstrovala použití mezipaměti, i tento kód vkládá časovou značku do názvu grafu.

  3. Vytvořte novou stránku s názvem ChartDisplayXMLChart.cshtml a přidejte do ní následující kód značkovacího jazyka:
    <!DOCTYPE html> 
    <html> 
      <head> 
        <meta charset="utf-8" /> 
        <title>Display chart from XML</title> 
      </head> 
      <body> 
        <img src="ChartSaveXML.cshtml" /> 
      </body> 
    </html>
  4. Spusťte stránku ChartDisplayXMLChart.cshtml. Je zobrazen graf. Všimněte si toho, jaké časové razítko je uvedeno v názvu grafu.
  5. Zavřete prohlížeč.
  6. V prostředí WebMatrix klikněte pravým tlačítkem na složku _ChartFiles, klikněte na příkaz Refresh (Aktualizovat) a poté složku otevřete. Soubor XMLChart.xml v této složce byl vytvořen pomocnou třídou Chart (Graf).

    ch07_charts-17

  7. Spusťte znovu stránku ChartDisplayXMLChart.cshtml. Graf zobrazuje stejné časové razítko jako při prvním spuštění stránky. Důvodem je to, že graf byl vygenerován z dříve uloženého souboru XML.
  8. V prostředí WebMatrix otevřete složku _ChartFiles a odstraňte soubor XMLChart.xml.
  9. Spusťte stránku ChartDisplayXMLChart.cshtml ještě jednou. Tentokrát je časové razítko aktualizováno, protože pomocná třída Chart (Graf) musela znovu vytvořit soubor XML. Pokud chcete, zkontrolujte složku _ChartFiles a všimněte si, že opět obsahuje soubor XML.

Další materiály

Kapitola 5 – Práce s daty

Kapitola 6 – Zobrazení dat v mřížce

Kapitola 15 – Zvýšení výkonu webu díky použití mezipaměti

Ovládací prvky pro zobrazení grafů

Referenční příručka pro webové stránky ASP.NET se syntaxí Razor