Zobrazení dat v grafu pomocí ASP.NET webových stránek (Razor)

Článek
07/13/2023

Tento článek vysvětluje použití grafu k zobrazení dat na webu ASP.NET Web Pages (Razor) pomocí pomocné rutiny Chart .

Co se naučíte:

Jak zobrazit data v grafu.

Jak vytvořit styl grafů pomocí předdefinovaných motivů

Jak ukládat grafy a jak je ukládat do mezipaměti pro lepší výkon.

Toto jsou ASP.NET programovací funkce představené v tomto článku:

Pomocná rutina Chart .

Poznámka

Informace v tomto článku platí pro webové stránky ASP.NET 1.0 a Webové stránky 2.

Pomocná rutina grafu

Pokud chcete data zobrazit v grafické podobě, můžete použít pomocnou rutinu Chart . Pomocník Chart může vykreslit obrázek, který zobrazuje data v různých typech grafů. Podporuje mnoho možností formátování a popisků. Pomocník Chart může vykreslit více než 30 typů grafů, včetně všech typů grafů, které můžete znát z Microsoft Excelu nebo jiných nástrojů – plošné, pruhové, sloupcové, spojnicové a výsečové grafy, spolu se specializovanými grafy, jako jsou burzovní grafy.

	Popis pruhového grafu
Popis sloupcového grafu	Popis spojnicového grafu
Popis výsečového grafu	Burzovní graf

Prvky grafu

Grafy zobrazují data a další prvky, jako jsou legendy, osy, řady atd. Následující obrázek znázorňuje mnoho prvků grafu, které můžete přizpůsobit při použití pomocné rutiny Chart . V tomto článku se dozvíte, jak nastavit některé (ne všechny) tyto prvky.

Popis: Obrázek znázorňující prvky grafu

Vytvoření grafu z dat

Data zobrazená v grafu můžou být z pole, z výsledků vrácených z databáze nebo z dat v souboru XML.

Použití pole

Jak je vysvětleno v úvodu k programování webových stránek ASP.NET pomocí syntaxe Razor, pole umožňuje uložit kolekci podobných položek do jedné proměnné. Pole můžete použít k tomu, aby obsahovaly data, která chcete zahrnout do grafu.

Tento postup ukazuje, jak můžete vytvořit graf z dat v polích pomocí výchozího typu grafu. Také ukazuje, jak zobrazit graf na stránce.

Vytvořte nový soubor s názvem ChartArrayBasic.cshtml.
Nahraďte existující obsah 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 zadáte pomocí AddTitle metody . K přidání dat použijte metodu AddSeries . V tomto příkladu namepoužijete parametry AddSeries , xValuea yValues metody . Parametr name se zobrazí v legendě grafu. Parametr xValue obsahuje pole dat, která se zobrazují podél vodorovné osy grafu. Parametr yValues obsahuje pole dat, které se používá k vykreslení svislých bodů grafu.

Metoda Write ve skutečnosti vykresluje graf. Protože jste v tomto případě nezadali typ grafu, Chart vykreslí pomocná rutina svůj výchozí graf, kterým je sloupcový graf.
Spusťte stránku v prohlížeči. Prohlížeč zobrazí graf.

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

Pokud jsou informace, které chcete zobrazit do grafu, v databázi, můžete spustit databázový dotaz a pak pomocí dat z výsledků vytvořit graf. Tento postup ukazuje, jak číst a zobrazovat data z databáze vytvořené v článku Úvod do práce s databází v ASP.NET weby webových stránek.

Pokud složka App_Data ještě neexistuje, přidejte ji do kořenového adresáře webu.
Do složky App_Data přidejte databázový soubor s názvem SmallBakery.sdf , který je popsaný v úvodu k práci s databází v ASP.NET webech webových stránek.
Vytvořte nový soubor s názvem ChartDataQuery.cshtml.
Nahraďte existující obsah 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();
}
```
Kód nejprve otevře databázi SmallBakery a přiřadí ji k proměnné s názvem db. Tato proměnná představuje Database objekt, který lze použít ke čtení z databáze a zápisu do databáze. Potom kód spustí dotaz SQL, který získá název a cenu jednotlivých produktů. Kód vytvoří nový graf a předá do něj databázový dotaz zavoláním metody chartu DataBindTable . Tato metoda přijímá dva parametry: dataSource parametr je pro data z dotazu a xField parametr umožňuje nastavit, který sloupec dat se použije pro osu X grafu.

Jako alternativu DataBindTable k použití metody můžete použít metodu AddSeries pomocné rutiny Chart . Metoda AddSeries umožňuje nastavit xValue parametry a yValues . Například místo použití DataBindTable metody jako je tato:
```
.DataBindTable(data, "Name")
```
Můžete použít metodu AddSeries takto:
```
.AddSeries("Default",
    xValue: data, xField: "Name",
    yValues: data, yFields: "Price")
```
Obě vykreslují stejné výsledky. Metoda AddSeries je flexibilnější, protože typ grafu a data můžete zadat explicitněji, ale DataBindTable tato metoda se snadněji používá, pokud nepotřebujete větší flexibilitu.
Spusťte stránku v prohlížeči.

Použití dat XML

Třetí možností pro grafy je použít jako data pro graf soubor XML. To vyžaduje, aby soubor XML měl také soubor schématu (soubor .xsd ), který popisuje strukturu XML. Tento postup ukazuje, jak číst data ze souboru XML.

Ve složce App_Data vytvořte nový soubor XML s názvemdata.xml.

Nahraďte stávající kód XML následujícím kódem, což jsou některá data XML o zaměstnanech ve 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>

Ve složce App_Data vytvořte nový soubor XML s názvem data.xsd. (Všimněte si, že tentokrát je přípona .xsd.)

Nahraďte existující kód XML následujícím kódem:

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

V kořenovém adresáři webu vytvořte nový soubor s názvem ChartDataXML.cshtml.
Nahraďte existující obsah 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ří DataSet objekt . Tento objekt slouží ke správě dat, která se čtou ze souboru XML, a jejich uspořádání podle informací v souboru schématu. (Všimněte si, že horní část kódu obsahuje příkaz using SystemData. To je nutné k tomu, aby bylo možné pracovat s objektem DataSet . Další informace najdete v části Using – příkazy a plně kvalifikované názvy dále v tomto článku.)

Dále kód vytvoří DataView objekt založený na datové sadě. Zobrazení dat poskytuje objekt, se kterým se graf může svázat – tj. čtení a vykreslení. Graf vytvoří vazbu na data pomocí AddSeries metody , jak jste viděli dříve při grafování maticových dat, s tím rozdílem, že parametry xValue a yValues jsou tentokrát nastaveny na DataView objekt .

Tento příklad také ukazuje, jak zadat konkrétní typ grafu. Po přidání dat do AddSeries metody je parametr také nastaven tak, chartType aby zobrazoval výsečový graf.
Spusťte stránku v prohlížeči.

Tip

Příkazy Using a plně kvalifikované názvy

Rozhraní .NET Framework, které ASP.NET webové stránky se syntaxí Razor, je založené na mnoha tisících komponent (třídách). Aby bylo možné pracovat se všemi těmito třídami, jsou uspořádané do oborů názvů, které se podobají knihovnám. Obor názvů například obsahuje třídy, System.Web které podporují komunikaci prohlížeče a serveru, System.Xml obor názvů obsahuje třídy, které se používají k vytváření a čtení souborů XML, a System.Data obor názvů obsahuje třídy, které umožňují pracovat s daty.

Aby bylo možné získat přístup k jakékoli dané třídě v rozhraní .NET Framework, musí kód znát nejen název třídy, ale také obor názvů, ve které se třída nachází. Pokud například chcete pomocnou rutinu Chart použít, musí kód najít System.Web.Helpers.Chart třídu, která kombinuje obor názvů (System.Web.Helpers) s názvem třídy (Chart). To se označuje jako plně kvalifikovaný název třídy – její úplné a jednoznačné umístění v rámci rozlehlého rozhraní .NET Framework. V kódu by to vypadalo takto:

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

Je ale náročné (a náchylné k chybám) používat tyto dlouhé, plně kvalifikované názvy pokaždé, když chcete odkazovat na třídu nebo pomocnou rutinu. Proto pro usnadnění používání názvů tříd můžete importovat obory názvů, které vás zajímají, což je obvykle jen několik z mnoha oborů názvů v rozhraní .NET Framework. Pokud jste naimportovali obor názvů, můžete místo plně kvalifikovaného názvu () použít jenom název třídy (ChartSystem.Web.Helpers.Chart). Když se kód spustí a narazí na název třídy, může hledat pouze v oborech názvů, které jste naimportovali, a najít tuto třídu.

Když k vytváření webových stránek použijete ASP.NET webové stránky se syntaxí Razor, obvykle se pokaždé použije stejná sada tříd, včetně WebPage třídy, různých pomocných rutin atd. Abyste ušetřili práci při importu relevantních oborů názvů při každém vytvoření webu, je ASP.NET nakonfigurovaná tak, aby automaticky importovala sadu základních oborů názvů pro každý web. To je důvod, proč jste dosud nemuseli pracovat s obory názvů nebo importem; Všechny třídy, se kterými jste pracovali, jsou v oborech názvů, které jsou už naimportované.

Někdy ale potřebujete pracovat s třídou, která není v oboru názvů, který se pro vás automaticky importuje. V takovém případě můžete buď použít plně kvalifikovaný název této třídy, nebo můžete ručně importovat obor názvů, který obsahuje třídu . K importu oboru názvů použijte using příkaz (import v jazyce Visual Basic), jak jste viděli v příkladu výše v článku.

Například DataSet třída je v System.Data oboru názvů . Obor System.Data názvů není automaticky dostupný pro ASP.NET stránky Razor Pages. Proto pro práci s třídou pomocí jejího plně kvalifikovaného DataSet názvu můžete použít kód podobný tomuto:

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

Pokud musíte třídu používat DataSet opakovaně, můžete naimportovat obor názvů, jako je tento, a pak v kódu použít jenom název třídy:

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

Můžete přidat using příkazy pro jakékoli jiné obory názvů rozhraní .NET Framework, na které chcete odkazovat. Jak je však uvedeno, nebudete to muset dělat často, protože většina tříd, se kterými budete pracovat, je v oborech názvů, které jsou automaticky importovány ASP.NET pro použití na stránkách .cshtml a .vbhtml .

Zobrazení grafů uvnitř webové stránky

V příkladech, které jste zatím viděli, vytvoříte graf a pak se vykreslí přímo v prohlížeči jako grafika. V mnoha případech ale chcete graf zobrazit jako součást stránky, ne jenom samostatně v prohlížeči. K tomu je potřeba dvoustupňový proces. Prvním krokem je vytvoření stránky, která graf vygeneruje, jak jste už viděli.

Druhým krokem je zobrazení výsledného obrázku na jiné stránce. K zobrazení obrázku použijete element HTML <img> stejným způsobem, jakým byste zobrazili jakýkoli obrázek. Místo odkazu na soubor <img>.jpgnebo .png však element odkazuje na soubor .cshtml, který obsahuje Chart pomocníka, který vytváří graf. Při spuštění <img> stránky zobrazení získá prvek výstup Chart pomocné rutiny a vykreslí graf.

Snímek obrazovky s grafy zobrazenými na webové stránce

Vytvořte soubor s názvem ShowChart.cshtml.

Nahraďte existující obsah 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>

Kód používá <img> element k zobrazení grafu, který jste vytvořili dříve v souboru ChartArrayBasic.cshtml .

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 .

Stylování grafu

Pomocná rutina Chart podporuje velké množství možností, které umožňují přizpůsobit vzhled grafu. Můžete nastavit barvy, písma, ohraničení atd. Snadný způsob, jak přizpůsobit vzhled grafu, je použít motiv. Motivy jsou kolekce informací, které určují, jak vykreslit graf pomocí písem, barev, popisků, palet, ohraničení a efektů. (Všimněte si, že styl grafu neuvádí typ grafu.)

Následující tabulka uvádí předdefinované motivy.

Motiv	Popis
`Vanilla`	Zobrazí červené sloupce na bílém pozadí.
`Blue`	Zobrazí modré sloupce na pozadí s modrým přechodem.
`Green`	Zobrazí modré sloupce na pozadí se zeleným přechodem.
`Yellow`	Zobrazí oranžové sloupce na pozadí žlutého přechodu.
`Vanilla3D`	Zobrazí 3D červené sloupce na bílém pozadí.

Můžete zadat motiv, který se má použít při vytváření nového grafu.

Vytvořte nový soubor s názvem ChartStyleGreen.cshtml.

Nahraďte existující obsah na 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();
}

Tento kód je stejný jako v předchozím příkladu, který používá databázi pro data, ale při vytváření objektu Chart přidá theme parametr . Následující příklad ukazuje změněný kód:

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

Spusťte stránku v prohlížeči. Zobrazí se stejná data jako předtím, ale graf vypadá dokonaleji:

Uložení grafu

Když použijete pomocnou rutinu Chart , jak jste zatím viděli v tomto článku, pomocník znovu vytvoří graf od začátku pokaždé, když se vyvolá. V případě potřeby kód grafu také znovu dotazuje databázi nebo znovu přečte soubor XML, aby získal data. V některých případech to může být složitá operace, například pokud je databáze, na kterou dotazujete, velká nebo pokud soubor XML obsahuje velké množství dat. I když graf neobsahuje velké množství dat, proces dynamického vytváření obrázku zabírá serverové prostředky, a pokud o stránku nebo stránky zobrazující graf požádá mnoho lidí, může to mít vliv na výkon vašeho webu.

Pokud chcete snížit potenciální dopad vytváření grafu na výkon, můžete graf vytvořit, když ho poprvé potřebujete, a pak ho uložit. Když je graf znovu potřeba, můžete místo opětovného generování načíst uloženou verzi a vykreslit ji.

Graf můžete uložit těmito způsoby:

Uložit graf do mezipaměti v paměti počítače (na serveru).
Uložte graf jako soubor obrázku.
Uložte graf jako soubor XML. Tato možnost umožňuje upravit graf před jeho uložením.

Ukládání grafu do mezipaměti

Po vytvoření můžete graf uložit do mezipaměti. Uložení grafu do mezipaměti znamená, že ho nemusíte vytvářet znovu, pokud ho potřebujete znovu zobrazit. Když graf uložíte do mezipaměti, dáte mu klíč, který musí být pro tento graf jedinečný.

Grafy uložené do mezipaměti se můžou odebrat, pokud má server nedostatek paměti. Mezipaměť se navíc vymaže, pokud se vaše aplikace z nějakého důvodu restartuje. Standardní způsob práce s grafem v mezipaměti je proto vždy nejprve zkontrolovat, jestli je v mezipaměti dostupný, a pokud ne, pak ho vytvořit nebo znovu vytvořit.

V kořenovém adresáři webu vytvořte soubor s názvem ShowCachedChart.cshtml.
Nahraďte existující obsah 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" />
    <p><a href="ClearCache.cshtml">Clear cache</a></p>
</body>
</html>
```
Značka <img> obsahuje src atribut, který odkazuje na soubor ChartSaveToCache.cshtml a předává klíč stránce jako řetězec dotazu. Klíč obsahuje hodnotu "myChartKey". Soubor ChartSaveToCache.cshtml obsahuje pomocnou rutinu Chart , která graf vytvoří. Tuto stránku vytvoříte za chvíli.

Na konci stránky je odkaz na stránku s názvem ClearCache.cshtml. To je stránka, kterou za chvíli také vytvoříte. Soubor ClearCache.cshtml potřebujete jenom k otestování ukládání do mezipaměti pro tento příklad – nejedná se o odkaz nebo stránku, které byste normálně použili při práci s grafy v mezipaměti.
V kořenovém adresáři webu vytvořte nový soubor s názvem ChartSaveToCache.cshtml.
Nahraďte existující obsah 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 zkontroluje, jestli se něco předalo jako hodnota klíče v řetězci dotazu. Pokud ano, kód se pokusí načíst graf z mezipaměti zavoláním GetFromCache metody a předáním klíče. Pokud se ukáže, že v mezipaměti pod tímto klíčem nic není (což by se stalo při prvním vyžádání grafu), kód vytvoří graf obvyklým způsobem. Po dokončení chartu ho kód uloží do mezipaměti voláním SaveToCachepříkazu . Tato metoda vyžaduje klíč (aby bylo možné si graf vyžádat později) a dobu, po kterou by měl být graf uložen v mezipaměti. (Přesný čas, kdy graf uložíte do mezipaměti, závisí na tom, jak často si myslíte, že se data, která představuje, můžou měnit.) Metoda SaveToCache také vyžaduje slidingExpiration parametr – pokud je nastavená na hodnotu true, čítač časového limitu se resetuje při každém přístupu ke grafu. V tomto případě to znamená, že platnost položky mezipaměti grafu vyprší 2 minuty po posledním přístupu uživatele ke grafu. (Alternativou k klouzavému vypršení platnosti je absolutní vypršení platnosti, což znamená, že platnost položky v mezipaměti vyprší přesně 2 minuty po vložení do mezipaměti, bez ohledu na to, jak často se k ní přistupovalo.)

Nakonec kód použije metodu WriteFromCache k načtení a vykreslení grafu z mezipaměti. Všimněte si, že tato metoda se nachází mimo if blok, který kontroluje mezipaměť, protože z mezipaměti získá graf bez ohledu na to, jestli graf byl na začátku nebo musel být vygenerován a uložen v mezipaměti.

Všimněte si, že v příkladu AddTitle metoda obsahuje časové razítko. (K názvu přidá aktuální datum a čas. DateTime.Now )
Vytvořte novou stránku s názvem ClearCache.cshtml a nahraďte její obsah následujícím kódem:
```
@{
    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>
```
Tato stránka pomocí pomocné rutiny WebCache odebere graf uložený v mezipaměti ChartSaveToCache.cshtml. Jak jsme si poznamenali dříve, obvykle nemusíte mít stránku, jako je tato. Vytváříte ho tady jenom kvůli snadnějšímu testování ukládání do mezipaměti.
V prohlížeči spusťte webovou stránku ShowCachedChart.cshtml . Stránka zobrazí obrázek grafu na základě kódu obsaženého v souboru ChartSaveToCache.cshtml . Poznamenejte si, co říká časové razítko v názvu grafu.
Zavřete prohlížeč.
Znovu spusťte soubor ShowCachedChart.cshtml . Všimněte si, že časové razítko je stejné jako předtím, což značí, že graf nebyl znovu vygenerován, ale byl načten z mezipaměti.
V souboru ShowCachedChart.cshtml klikněte na odkaz Vymazat mezipaměť . Tím přejdete na ClearCache.cshtml, který hlásí, že mezipaměť byla vymazána.
Klikněte na odkaz Zpět do souboru ShowCachedChart.cshtml nebo znovu spusťte soubor ShowCachedChart.cshtml z webu WebMatrix. Všimněte si, že tentokrát se časové razítko změnilo, protože mezipaměť byla vymazána. Proto kód musel graf znovu vygenerovat a vložit ho zpět do mezipaměti.

Uložení grafu jako souboru obrázku

Graf můžete také uložit jako soubor obrázku (například jako soubor.jpg ) na serveru. Soubor obrázku pak můžete použít stejně jako jakýkoli obrázek. Výhodou je, že soubor se místo ukládání do dočasné mezipaměti ukládá. Nový obrázek grafu můžete uložit v různých časech (například každou hodinu) a pak uchovávat trvalý záznam změn, ke kterým dochází v průběhu času. Nezapomeňte, že se musíte ujistit, že webová aplikace má oprávnění k uložení souboru do složky na serveru, kam chcete soubor obrázku umístit.

V kořenovém adresáři webu vytvořte složku s názvem _ChartFiles , pokud ještě neexistuje.
V kořenovém adresáři webu vytvořte nový soubor s názvem ChartSave.cshtml.

Stávající obsah 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 zkontroluje, zda existuje soubor.jpg voláním File.Exists metody. Pokud soubor neexistuje, kód vytvoří nový Chart z pole. Tentokrát kód zavolá metodu Save a předá path parametr určující cestu k souboru a název souboru, kam se má graf uložit. V textu stránky prvek <img> používá cestu k odkazování na soubor.jpg k zobrazení.

Spusťte soubor ChartSave.cshtml .
Vraťte se na WebMatrix. Všimněte si, že soubor obrázku s názvemchart01.jpg byl uložen do složky _ChartFiles .

Uložení grafu jako souboru XML

Nakonec můžete graf uložit jako soubor XML na serveru. Výhodou použití této metody oproti ukládání grafu do mezipaměti nebo uložení grafu do souboru je, že jste mohli upravit XML před zobrazením grafu, pokud chcete. Vaše aplikace musí mít oprávnění ke čtení a zápisu pro složku na serveru, kam chcete umístit soubor obrázku.

V kořenovém adresáři webu vytvořte nový soubor s názvem ChartSaveXml.cshtml.
Stávající obsah 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á kódu, který jste viděli dříve pro ukládání grafu do mezipaměti s tím rozdílem, že používá soubor XML. Kód nejprve zkontroluje, zda soubor XML existuje voláním File.Exists metody. Pokud soubor existuje, kód vytvoří nový Chart objekt a předá název souboru jako themePath parametr. Tím se vytvoří graf založený na tom, co je v souboru XML. Pokud soubor XML ještě neexistuje, kód vytvoří graf jako normální a pak zavolá SaveXml jeho uložení. Graf se vykresluje pomocí Write metody, jak jste viděli dříve.

Stejně jako u stránky, na které se zobrazilo ukládání do mezipaměti, obsahuje tento kód v názvu grafu časové razítko.

Vytvořte novou stránku s názvem ChartDisplayXMLChart.cshtml a přidejte do ní následující kód:

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

Spusťte stránku ChartDisplayXMLChart.cshtml . Zobrazí se graf. Poznamenejte si časové razítko v názvu grafu.
Zavřete prohlížeč.
Ve službě WebMatrix klikněte pravým tlačítkem na složku _ChartFiles , klikněte na Aktualizovat a pak složku otevřete. SouborXMLChart.xml v této složce vytvořil Chart pomocník.
Znovu spusťte stránku ChartDisplayXMLChart.cshtml . Graf zobrazuje stejné časové razítko jako při prvním spuštění stránky. Je to proto, že se graf generuje z xml, který jste si uložili dříve.
V aplikaci WebMatrix otevřete složku _ChartFiles a odstraňte souborXMLChart.xml .
Znovu spusťte stránku ChartDisplayXMLChart.cshtml . Tentokrát se časové razítko aktualizuje, protože Chart pomocník musel znovu vytvořit soubor XML. Pokud chcete, zkontrolujte složku _ChartFiles a všimněte si, že soubor XML je zpátky.

Další materiály

Úvod do práce s databází na webech ASP.NET webových stránek
Zvýšení výkonu pomocí ukládání do mezipaměti na webech ASP.NET webových stránek
Chart – třída (referenční informace k rozhraní API webových stránek ASP.NET na WEBU MSDN)

Sdílet prostřednictvím

Zobrazení dat v grafu pomocí ASP.NET webových stránek (Razor)

Pomocná rutina grafu

Prvky grafu

Vytvoření grafu z dat

Použití pole

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

Použití dat XML

Příkazy Using a plně kvalifikované názvy

Zobrazení grafů uvnitř webové stránky

Stylování grafu

Uložení grafu

Ukládání grafu do mezipaměti

Uložení grafu jako souboru obrázku

Uložení grafu jako souboru XML

Další materiály

Váš názor

Váš názor

Další materiály