ASP.NET Web Sayfalarıyla Grafikte Veri Görüntüleme (Jilet)

Microsoft tarafından

Bu makalede, Chart yardımcıyı kullanarak ASP.NET bir Web Sayfaları (Jilet) web sitesinde verileri görüntülemek için grafiğin nasıl kullanılacağı açıklanmaktadır.

Ne öğreneceksiniz:

  • Grafikte veri görüntüleme.
  • Yerleşik temaları kullanarak grafikleri stile şekillendirme.
  • Grafiklerin nasıl kaydedilen ve daha iyi performans için nasıl önbelleğe kazanılabildiği.

Bu makalede tanıtılan ASP.NET programlama özellikleri şunlardır:

  • Chart Yardımcı.

Note

Bu makaledeki bilgiler ASP.NET Web Sayfaları 1.0 ve Web Sayfaları 2 için geçerlidir.

Grafik Yardımcısı

Verilerinizi grafik biçiminde görüntülemek istediğinizde, yardımcıyı Chart kullanabilirsiniz. Yardımcı, Chart çeşitli grafik türlerinde veri görüntüleyen bir görüntü işleyebilir. Biçimlendirme ve etiketleme için birçok seçeneği destekler. Yardımcı, Chart Microsoft Excel veya diğer araçlardan aşina olabileceğiniz tüm grafik türleri, alan grafikleri, çubuk grafikler, sütun grafikleri, satır grafikleri ve pasta grafikleri — ve stok grafikleri gibi daha özel grafikler de dahil olmak üzere 30'dan fazla grafik türünü işleyebilir.

Alan grafiği Açıklaması: Alan grafiği tipinin resmi Çubuk grafik Açıklama: Çubuk grafik türünün resmi
Sütun grafiği Açıklama: Sütun grafik türünün resmi Çizgi grafiği Açıklama: Çizgi grafiği türünün resmi
Pasta grafiği Açıklama: Pasta grafik türünün resmi Stok grafiği Açıklaması: Stok grafiği türünün resmi

Grafik Öğeleri

Grafikler verileri ve göstergeler, eksenler, seriler ve benzeri ek öğeleri gösterir. Aşağıdaki resim, yardımcıyı kullandığınızda özelleştirebileceğiniz grafik öğelerinin Chart çoğunu gösterir. Bu makalede, bu öğelerin bazılarını (tümü değil) nasıl ayarlayabileceğinizgösterilmektedir.

Açıklama: Grafik öğelerini gösteren resim

Verilerden Grafik Oluşturma

Grafikte görüntülediğiniz veriler bir diziden, veritabanından döndürülen sonuçlardan veya XML dosyasındaki verilerden olabilir.

Dizi Kullanma

ASP.NET Web Sayfaları Programlamaya Giriş'te açıklandığı gibi, Jilet Sözdizimini kullanarakbir dizi benzer öğelerin bir koleksiyonunu tek bir değişkende depolamanızı sağlar. Dizileri, grafiğinize eklemek istediğiniz verileri içerecek şekilde kullanabilirsiniz.

Bu yordam, varsayılan grafik türünü kullanarak diziler halindeki verilerden nasıl grafik oluşturabileceğinizi gösterir. Ayrıca, sayfa içinde grafiğin nasıl görüntülenebildiğini de gösterir.

  1. ChartArrayBasic.cshtmladlı yeni bir dosya oluşturun.

  2. Varolan içeriği aşağıdakilerle değiştirin:

    @{
        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 önce yeni bir grafik oluşturur ve genişliğini ve yüksekliğini ayarlar. Yöntemi kullanarak grafik başlığını AddTitle belirtirsiniz. Veri eklemek için AddSeries yöntemi kullanırsınız. Bu örnekte, nameyöntemin xValue, yValues , AddSeries ve parametrelerini kullanırsınız. name Parametre grafik göstergesinde görüntülenir. Parametre, xValue grafiğin yatay ekseni boyunca görüntülenen bir veri dizisi içerir. Parametre, yValues grafiğin dikey noktalarını çizmek için kullanılan bir veri dizisi içerir.

    Yöntem Write aslında grafiği işler. Bu durumda, bir grafik türü belirtmediğiniz Chart için, yardımcı varsayılan grafiği işler, bu da bir sütun grafiğidir.

  3. Sayfayı tarayıcıda çalıştırın. Tarayıcı grafiği görüntüler.

Grafik Verileri için Veritabanı Sorgusu Kullanma

Grafik oluşturmak istediğiniz bilgiler bir veritabanındaysa, bir veritabanı sorgusu çalıştırabilir ve ardından grafiği oluşturmak için sonuçlardan gelen verileri kullanabilirsiniz. Bu yordam, web sayfaları sitelerinde bir Veritabanı ile çalışmaya girişmakalesinde oluşturulan veritabanından verileri nasıl okuyup görüntüleyebilirASP.NET.

  1. Klasör zaten yoksa, web sitesinin köküne bir Uygulama_Veri klasörü ekleyin.

  2. Uygulama_Verileri klasörüne, ASP.NET Web Sayfaları Sitelerinde Veritabanıyla Çalışmaya Giriş'teaçıklanan SmallBakery.sdf adlı veritabanı dosyasını ekleyin.

  3. ChartDataQuery.cshtmladında yeni bir dosya oluşturun.

  4. Varolan içeriği aşağıdakilerle değiştirin:

    @{
        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 ilk Olarak SmallBakery veritabanını açar ve dbonu . Bu değişken, Database veritabanından okumak ve yazmak için kullanılabilecek bir nesneyi temsil eder. Ardından, kod her ürünün adını ve fiyatını almak için bir SQL sorgusu çalıştırın. Kod yeni bir grafik oluşturur ve grafik DataBindTable yöntemini çağırarak veritabanı sorgusunu ona geçirir. Bu yöntem iki parametre alır: dataSource parametre sorgudaki veriler xField içindir ve parametre grafiğin x ekseni için hangi veri sütununun kullanılacağını ayarlamanızı sağlar.

    DataBindTable Yöntemi kullanmaya alternatif olarak, yardımcının AddSeries yöntemini Chart kullanabilirsiniz. Yöntem, AddSeries parametreleri xValue ve yValues parametreleri ayarlamanızı sağlar. Örneğin, aşağıdaki gibi DataBindTable yöntemi kullanmak yerine:

    .DataBindTable(data, "Name")
    

    Bu yöntemi AddSeries kullanabilirsiniz:

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

    Her ikisi de aynı sonuçları verir. Grafik AddSeries türünü ve verilerini daha açık bir şekilde belirtebildiğiniz DataBindTable için yöntem daha esnektir, ancak ekstra esnekliğe ihtiyacınız yoksa yöntem daha kolaydır.

  5. Sayfayı tarayıcıda çalıştırın.

XML Verilerini Kullanma

Grafik için üçüncü seçenek grafik için veri olarak bir XML dosyası kullanmaktır. Bu, XML dosyasının XML yapısını açıklayan bir şema dosyası (.xsd dosyası) da bulunmasını gerektirir. Bu yordam, bir XML dosyasından verileri nasıl okuyabileceğinizi gösterir.

  1. _App Data klasöründe data.xmladında yeni bir XML dosyası oluşturun.

  2. Varolan XML'i, kurgusal bir şirketteki çalışanlar la ilgili bazı XML verileri olan aşağıdakilerle değiştirin.

    <?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 klasöründe data.xsdadında yeni bir XML dosyası oluşturun. (Bu süre uzantısı .xsdolduğunu unutmayın .)

  4. Varolan XML'i aşağıdakilerle değiştirin:

    <?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. Web sitesinin kökünde ChartDataXML.cshtmladında yeni bir dosya oluşturun.

  6. Varolan içeriği aşağıdakilerle değiştirin:

    @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 önce bir DataSet nesne oluşturur. Bu nesne, XML dosyasından okunan verileri yönetmek ve şema dosyasındaki bilgilere göre düzenlemek için kullanılır. (Kodun üst kısmında ifadenin using SystemDatayer aldığına dikkat edin. Bu DataSet nesne ile çalışabilmek için gereklidir. Daha fazla bilgi için, bu makalenin ilerleyen saatlerinde "Ifadeleri ve Tam Nitelikli Adları" Kullanma'ya bakın.)

    Ardından, kod veri DataView kümesini temel alan bir nesne oluşturur. Veri görünümü, grafiğin — bağlayabileceği, okunan ve çizilebilen bir nesne sağlar. Grafik, dizi verilerini grafikyaparken AddSeries daha önce gördüğünüz gibi, bu kez xValue yValues parametrenin DataView nesneye ayarlanması dışında, yöntemi kullanarak verilere bağlanır.

    Bu örnek, belirli bir grafik türünü nasıl belirtdiğinizi de gösterir. AddSeries Yönteme veri eklendiğinde, chartType parametre de bir pasta grafiği görüntülemek üzere ayarlanır.

  7. Sayfayı tarayıcıda çalıştırın.

Tip

"Kullanma" Deyimleri ve Tam Nitelikli İsimler

Web Sayfalarını Jilet sözdizimi ile ASP.NET .NET Framework binlerce bileşenden (sınıf) oluşur. Tüm bu sınıflarla çalışmayı yönetilebilir hale getirmek için, bir şekilde kitaplıklar gibi ad boşluklarıhalinde düzenlenirler. Örneğin, System.Web ad alanı tarayıcı/sunucu iletişimini destekleyen System.Xml sınıflar içerir, ad alanı XML dosyaları oluşturmak System.Data ve okumak için kullanılan sınıfları içerir ve ad alanı verilerle çalışmanıza izin veren sınıflar içerir.

.NET Framework'de belirli bir sınıfa erişmek için kodun sadece sınıf adını değil, sınıfın içinde bulunduğu ad alanını da bilmesi gerekir. Örneğin, Chart yardımcıyı kullanabilmek için kodun ad System.Web.Helpers.Chart alanını (System.Web.Helpers``Chart) sınıf adı yla birleştiren sınıfı bulması gerekir. Bu, sınıfın tam nitelikli adı — .NET Framework'ün enginliği içinde tam ve net konumu olarak bilinir. Kod olarak, bu aşağıdaki gibi görünür:

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

Ancak, bir sınıfa veya yardımcıya başvurmak istediğiniz her seferinde bu uzun, tam nitelikli adları kullanmak zorunda olmak hantal (ve hataya yatkındır). Bu nedenle, sınıf adlarını kullanmayı kolaylaştırmak için, ilgilendiğiniz ad alanlarını içe aktarabilirsiniz, ki bu genellikle .NET Framework'deki birçok ad alanı arasından sadece bir avuç tır. Bir ad alanı aldıysanız, tam nitelikli ad (Chart``System.Web.Helpers.Chart) yerine sadece bir sınıf adı kullanabilirsiniz. Kodunuz çalıştığında ve bir sınıf adıile karşılaştığında, o sınıfı bulmak için içe aktardığınız ad alanlarına bakabilir.

Web sayfalarını oluşturmak için ASP.NET Web Sayfalarını Razor sözdizimi ile kullandığınızda, genellikle WebPage sınıf, çeşitli yardımcılar ve benzeri dahil olmak üzere her seferinde aynı sınıf kümesini kullanırsınız. Bir web sitesi oluşturduğunuzher zaman ilgili ad alanlarını alma işini size kazandırmak için, ASP.NET yapılandırılır, böylece her web sitesi için bir dizi temel ad alanı otomatik olarak içeri aktarılır. Bu yüzden isim alanları yla uğraşmak veya bugüne kadar içe aktarma yapmak zorunda kalmadınız; Birlikte çalıştığınız tüm sınıflar, sizin için zaten alınmış olan ad alanlarındadır.

Ancak, bazen sizin için otomatik olarak alınan bir ad alanında olmayan bir sınıfla çalışmanız gerekir. Bu durumda, bu sınıfın tam nitelikli adını kullanabilir veya sınıfı içeren ad alanını el ile içe aktarabilirsiniz. Bir ad alanı almak için, using import makalenin önceki bir örneğinde gördüğünüz gibi deyimi (Visual Basic'te) kullanırsınız.

Örneğin, DataSet sınıf System.Data ad alanındadır. Ad System.Data alanı, ASP.NET Razor sayfalarında otomatik olarak kullanılamaz. Bu nedenle, DataSet sınıfla tam nitelikli adını kullanarak çalışmak için aşağıdaki gibi kod kullanabilirsiniz:

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

DataSet Sınıfı tekrar tekrar kullanmanız gerekiyorsa, böyle bir ad alanını içe aktarabilir ve ardından kodda sadece sınıf adını kullanabilirsiniz:

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

Başvurmak istediğiniz using diğer .NET Framework ad alanları için ekstreler ekleyebilirsiniz. Ancak, birlikte çalışacağınız sınıfların çoğu .cshtml ve .vbhtml sayfalarında kullanılmak üzere ASP.NET tarafından otomatik olarak içe aktarılan ad alanlarında olduğundan, bunu sık sık yapmanız gerekmez.

Web Sayfası İçinde Grafikleri Görüntüleme

Şimdiye kadar gördüğünüz örneklerde, bir grafik oluşturursunuz ve grafik doğrudan tarayıcıya grafik olarak işlenir. Ancak, çoğu durumda, bir grafiği yalnızca tarayıcıda tek başına değil, bir sayfanın parçası olarak görüntülemek istersiniz. Bunu yapmak için iki adımlı bir işlem gerektirir. İlk adım, daha önce gördüğünüz gibi grafiği oluşturan bir sayfa oluşturmaktır.

İkinci adım, elde edilen görüntüyü başka bir sayfada görüntülemektir. Görüntüyü görüntülemek için, herhangi <img> bir görüntüyü görüntülemek için yaptığınız gibi bir HTML öğesi kullanırsınız. Ancak, bir .jpg veya .png dosyasına <img> başvurmak yerine, öğe grafiği oluşturan Chart yardımcıyı içeren .cshtml dosyasına başvurur. Görüntü sayfası çalıştığında, <img> öğe Chart yardımcının çıktısını alır ve grafiği işler.

  1. ShowChart.cshtmladlı bir dosya oluşturun.

  2. Varolan içeriği aşağıdakilerle değiştirin:

    <!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, <img> ChartArrayBasic.cshtml dosyasında daha önce oluşturduğunuz grafiği görüntülemek için öğeyi kullanır.

  3. Web sayfasını tarayıcıda çalıştırın. ShowChart.cshtml dosyası, ChartArrayBasic.cshtml dosyasında bulunan kodu temel alan grafik görüntüsünü görüntüler.

Grafik Oluşturma

Yardımcı, Chart grafiğin görünümünü özelleştirmenize izin veren çok sayıda seçeneği destekler. Renkleri, yazı tiplerini, kenarlıkları ve benzerlerini ayarlayabilirsiniz. Grafiğin görünümünü özelleştirmenin kolay bir yolu bir temakullanmaktır. Temalar, yazı tipleri, renkler, etiketler, paletler, kenarlıklar ve efektler kullanarak grafiğin nasıl işlendirilebildiğini belirten bilgi koleksiyonlarıdır. (Grafiğin stilinin grafik türünü belirtmediğini unutmayın.)

Aşağıdaki tabloda yerleşik temalar listelenir.

Tema Açıklama
Vanilla Beyaz arka planda kırmızı sütunlar görüntüler.
Blue Mavi degrade arka planda mavi sütunları görüntüler.
Green Yeşil degrade arka planda mavi sütunları görüntüler.
Yellow Turuncu sütunları sarı degrade arka planda görüntüler.
Vanilla3D Beyaz arka planda 3 B'lik kırmızı sütunlar görüntüler.

Yeni bir grafik oluştururken kullanılacak temayı belirtebilirsiniz.

  1. ChartStyleGreen.cshtmladlı yeni bir dosya oluşturun.

  2. Sayfadaki varolan içeriği aşağıdakilerle değiştirin:

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

    Bu kod, veri veritabanını kullanan önceki örnekle aynıdır, theme ancak Chart nesneyi oluştururken parametreyi ekler. Değiştirilen kod aşağıda gösterilmektedir:

    var myChart = new Chart(width: 600,
                        height: 400,
                        theme: ChartTheme.Green)
    
  3. Sayfayı tarayıcıda çalıştırın. Öncekiyle aynı verileri görüyorsunuz, ancak grafik daha parlak görünüyor:

Grafik Kaydetme

Bu makalede Chart şimdiye kadar gördüğünüz yardımcıyı kullandığınızda, yardımcı her çağrıldığında grafiği sıfırdan yeniden oluşturur. Gerekirse, grafiğin kodu da veritabanını yeniden sorgular veya verileri almak için XML dosyasını yeniden okur. Bazı durumlarda, sorguladığınız veritabanı büyükse veya XML dosyası çok fazla veri içeriyorsa, bunu yapmak karmaşık bir işlem olabilir. Grafik çok fazla veri içermese bile, dinamik olarak görüntü oluşturma işlemi sunucu kaynaklarını kaplar ve birçok kişi grafiği görüntüleyen sayfa veya sayfaları isterse, web sitenizin performansı üzerinde bir etki olabilir.

Grafik oluşturmanın olası performans etkisini azaltmanıza yardımcı olmak için, ilk ihtiyacınız olduğunda bir grafik oluşturabilir ve ardından kaydedebilirsiniz. Grafik yeniden gerekli olduğunda, yeniden oluşturmak yerine, sadece kaydedilen sürümü almak ve bu render.

Bir grafiği şu şekilde kaydedebilirsiniz:

  • Grafiği bilgisayar belleğinde (sunucuda) önbelleğe getirin.
  • Grafiği görüntü dosyası olarak kaydedin.
  • Grafiği XML dosyası olarak kaydedin. Bu seçenek, grafiği kaydetmeden önce değiştirmenize olanak tanır.

Grafiği Önbelleğe Alma

Bir grafik oluşturduktan sonra, grafiği önbelleğe alabilirsiniz. Grafiği önbelleğe almak, yeniden görüntülenmesi gerekiyorsa yeniden oluşturulması gerekmediği anlamına gelir. Önbelleğe bir grafik kaydettiğinizde, bu grafiğe özgü olması gereken bir anahtar verirsiniz.

Sunucunun belleği az alıyorsa önbelleğe kaydedilen grafikler kaldırılabilir. Ayrıca, uygulamanız herhangi bir nedenle yeniden başlatılırsa önbellek temizlenir. Bu nedenle, önbelleğe alınmış bir grafikle çalışmanın standart yolu, her zaman önce önbellekte kullanılabilir olup olmadığını denetlemek, değilse de oluşturmak veya yeniden oluşturmaktır.

  1. Web sitenizin kökünde, ShowCachedChart.cshtmladlı bir dosya oluşturun.

  2. Varolan içeriği aşağıdakilerle değiştirin:

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

    Etiket, <img> src ChartSaveToCache.cshtml dosyasına işaret eden ve sayfaya bir anahtarı sorgu dizesi olarak aktaran bir öznitelik içerir. Anahtar myChartKey ""değerini içerir. ChartSaveToCache.cshtml dosyası, Chart grafiği oluşturan yardımcıyı içerir. Bu sayfayı birazdan oluşturacaksınız.

    Sayfanın sonunda ClearCache.cshtmladlı bir sayfanın bağlantısı var. Bu, kısa süre içinde oluşturacağınız bir sayfadır. Önbelleğe alma yalnızca bu örnek için önbelleğe alma test etmek için ClearCache.cshtml gerekir - önbelleğe alınmış grafiklerle çalışırken normalde dahil edeceğiniz bir bağlantı veya sayfa değildir.

  3. Web sitenizin kökünde ChartSaveToCache.cshtmladlı yeni bir dosya oluşturun.

  4. Varolan içeriği aşağıdakilerle değiştirin:

    @{
        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 ilk olarak sorgu dizesinde anahtar değer olarak bir şey geçirilip geçirilemediğini denetler. Bu nedenle, kod GetFromCache yöntemi çağırarak ve anahtarı geçirerek önbellek dışında bir grafik okumaya çalışır. Önbellekte bu anahtarın altında hiçbir şey olmadığı ortaya çıkarsa (grafik ilk kez istendiğinde olur), kod grafiği her zamanki gibi oluşturur. Grafik tamamlandığında, kod çağırarak SaveToCacheönbelleğe kaydeder. Bu yöntem bir anahtar (böylece grafik daha sonra istenebilir) ve grafik önbellekte kaydedilmesi gereken süre gerektirir. (Bir grafiği tam olarak önbelleğe aldığınız süre, temsil ettiği verilerin ne sıklıkta değişebileceğini düşündüğünüze bağlıdır.) Yöntem, SaveToCache bu slidingExpiration doğru ayarlanmışsa — bir parametre gerektirir, zaman çizelgesi sayacı grafiğe her erişinde sıfırlanır. Bu durumda, geçerli olarak, grafiğin önbellek girişinin, birisi grafiğe en son eriştikten 2 dakika sonra sona erdiği anlamına gelir. (Sürgülü son kullanma süresinin alternatifi mutlak son kullanma süresidir, yani önbellek girişi ne sıklıkta erişilmiş olursa olsun, önbelleğe alındıktan tam 2 dakika sonra sona erer.)

    Son olarak, kod WriteFromCache önbellekten grafiği getirmek ve işlemek için yöntemi kullanır. Bu yöntemin if önbelleği denetleyen bloğun dışında olduğunu unutmayın, çünkü grafiğin başlangıçta orada olup olmadığını veya oluşturulup önbelleğe kaydedilmesi gerekip gerekmediğini önbellekten alır.

    Örnekte, yöntembir AddTitle zaman damgası içerir dikkat edin. (Geçerli tarih ve saati DateTime.Now — — başlığa ekler.)

  5. ClearCache.cshtml adında yeni bir sayfa oluşturun ve içeriğini aşağıdakilerle değiştirin:

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

    Bu sayfa, WebCache ChartSaveToCache.cshtmlönbelleğe alınmış grafiği kaldırmak için yardımcı kullanır. Daha önce belirtildiği gibi, normalde böyle bir sayfa olması zorunda değilsiniz. Önbelleğe alma testini kolaylaştırmak için burada yaratıyorsun.

  6. ShowCachedChart.cshtml web sayfasını tarayıcıda çalıştırın. Sayfa, ChartSaveToCache.cshtml dosyasında bulunan kodu temel alan grafik görüntüsünü görüntüler. Zaman damgasının grafik başlığında ne yazdığına dikkat edin.

    Açıklama: Grafik başlığında zaman damgası olan temel grafiğin resmi

  7. Tarayıcıyı kapatın.

  8. ShowCachedChart.cshtml'i yeniden çalıştırın. Zaman damgasının öncekiyle aynı olduğuna dikkat edin, bu da grafiğin yeniden oluşturulmadığını, bunun yerine önbellekten okunduğunu gösterir.

  9. ShowCachedChart.cshtml'de önbelleği temizle bağlantısını tıklatın. Bu, önbelleğin temizlendiğini bildiren ClearCache.cshtml'egötürür.

  10. ShowCachedChart.cshtml bağlantısını döndür'e veya WebMatrix'ten ShowCachedChart.cshtml'i yeniden çalıştırmayı tıklatın. Önbellek temizlenmiş olduğundan, bu kez zaman damgasının değiştiğine dikkat edin. Bu nedenle, kodun grafiği yeniden oluşturması ve önbelleğe geri koyması gerekiyordu.

Grafiği Görüntü Dosyası Olarak Kaydetme

Ayrıca, bir grafiği sunucuya görüntü dosyası (örneğin, .jpg dosyası olarak) olarak kaydedebilirsiniz. Daha sonra görüntü dosyasını herhangi bir görüntü gibi kullanabilirsiniz. Avantajı, dosyanın geçici bir önbelleğe kaydedilen yerine depolanmasıdır. Yeni bir grafik görüntüsünü farklı zamanlarda (örneğin, her saat) kaydedebilir ve zaman içinde meydana gelen değişikliklerin kalıcı bir kaydını tutabilirsiniz. Web uygulamanızın görüntü dosyasını koymak istediğiniz sunucudaki klasöre bir dosya yı kaydetme izniolduğundan emin olmalısınız.

  1. Web sitenizin kökünde, zaten yoksa * _ChartFiles* adında bir klasör oluşturun.

  2. Web sitenizin kökünde ChartSave.cshtmladında yeni bir dosya oluşturun.

  3. Varolan içeriği aşağıdakilerle değiştirin:

    @{
        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 ilk File.Exists olarak .jpg dosyasının yöntemi arayarak var olup olmadığını denetler. Dosya yoksa, kod bir diziden yeni Chart bir dosya oluşturur. Bu kez, kod Save yöntemi çağırır path ve dosya yolunu ve grafiği nitaz dosya adını belirtmek için parametreyi geçer. Sayfanın gövdesinde, bir <img> öğe .jpg dosyasını görüntülemek için işaret etmek için yolu kullanır.

  4. ChartSave.cshtml dosyasını çalıştırın.

  5. WebMatrix'e geri dön. Chart01.jpg adlı bir resim dosyasının * _ChartFiles* klasörüne kaydedildiğine dikkat edin.

Grafiği XML Dosyası Olarak Kaydetme

Son olarak, bir grafiği sunucuya XML dosyası olarak kaydedebilirsiniz. Bu yöntemi grafiği önbelleğe almak veya grafiği bir dosyaya kaydetmek yerine kullanmanın bir avantajı, isterseniz grafiği görüntülemeden önce XML'i değiştirebilmektir. Uygulamanız, görüntü dosyasını koymak istediğiniz sunucudaki klasör için okuma/yazma izinleri olması gerekir.

  1. Web sitenizin kökünde ChartSaveXml.cshtmladında yeni bir dosya oluşturun.

  2. Varolan içeriği aşağıdakilerle değiştirin:

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

    Bu kod, xml dosyası kullanması dışında önbellekte bir grafik depolamak için daha önce gördüğünüz koda benzer. Kod, File.Exists önce Yöntem'i arayarak XML dosyasının var olup olmadığını denetlemek için denetler. Dosya varsa, kod yeni Chart bir nesne oluşturur ve themePath dosya adını parametre olarak geçirir. Bu, XML dosyasında ne varsa grafiği oluşturur. XML dosyası zaten yoksa, kod normal gibi bir grafik oluşturur SaveXml ve sonra kaydetmek için çağırır. Grafik, daha önce Write gördüğünüz gibi yöntem kullanılarak işlenir.

    Önbelleğe alma gösteren sayfada olduğu gibi, bu kod grafik başlığında bir zaman damgası içerir.

  3. ChartDisplayXMLChart.cshtml adında yeni bir sayfa oluşturun ve aşağıdaki işaretlemeyi ekleyin:

    <!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 sayfasını çalıştırın. Grafik görüntülenir. Grafiğin başlığındaki zaman damgasını dikkate alın.

  5. Tarayıcıyı kapatın.

  6. WebMatrix'te * _ChartFiles* klasörünü sağ tıklatın, Yenile'yitıklatın ve ardından klasörü açın. Bu klasördeki XMLChart.xml dosyası Chart yardımcı tarafından oluşturuldu.

    Açıklama: Grafik yardımcısı tarafından oluşturulan XMLChart.xml dosyasını gösteren _ChartFiles klasörü.

  7. ChartDisplayXMLChart.cshtml sayfasını yeniden çalıştırın. Grafik, sayfayı ilk çalıştırdığınız da aynı zaman damgasını gösterir. Bunun nedeni, grafiğin daha önce kaydettiğiniz XML'den oluşturulmasıdır.

  8. WebMatrix'te * _ChartFiles* klasörünü açın ve XMLChart.xml dosyasını silin.

  9. ChartDisplayXMLChart.cshtml sayfasını bir kez daha çalıştırın. Chart Bu kez, yardımcıxXML dosyasını yeniden oluşturmak zorunda olduğundan, zaman damgası güncelleştirilir. İstersen, * _ChartFiles* klasörünü kontrol edin ve XML dosyasının geri döndüğünü fark edin.

Ek Kaynaklar