Bagikan melalui

Menampilkan Data dalam Bagan dengan Halaman Web ASP.NET (Razor)

oleh Microsoft

Artikel ini menjelaskan cara menggunakan bagan untuk menampilkan data di situs web ASP.NET Web Pages (Razor) dengan menggunakan pembantu Chart .

Apa yang akan Anda pelajari:

  • Cara menampilkan data dalam bagan.
  • Cara membuat gaya bagan menggunakan tema bawaan.
  • Cara menyimpan bagan dan cara menyimpannya untuk performa yang lebih baik.

Ini adalah fitur pemrograman ASP.NET yang diperkenalkan dalam artikel:

  • Pembantu Chart .

Catatan

Informasi dalam artikel ini berlaku untuk ASP.NET Halaman Web 1.0 dan Halaman Web 2.

Pembantu Bagan

Saat Anda ingin menampilkan data Dalam bentuk grafis, Anda bisa menggunakan Chart pembantu. Pembantu Chart dapat merender gambar yang menampilkan data dalam berbagai jenis bagan. Ini mendukung banyak opsi untuk pemformatan dan pelabelan. Pembantu Chart dapat merender lebih dari 30 tipe bagan, termasuk semua tipe bagan yang mungkin Anda kenal dari Microsoft Excel atau alat lainnya — bagan area, bagan batang, bagan kolom, bagan garis, dan bagan pai, bersama dengan bagan yang lebih khusus seperti bagan saham.

Bagan area Deskripsi: Gambar tipe bagan Area Bagan batang Deskripsi: Gambar tipe bagan Batang
Bagan kolom Deskripsi: Gambar tipe bagan Kolom Bagan garis Deskripsi: Gambar tipe bagan Garis
Bagan pai Deskripsi: Gambar tipe bagan Pai Bagan saham Deskripsi: Gambar tipe bagan Stok

Elemen Bagan

Bagan memperlihatkan data dan elemen tambahan seperti legenda, sumbu, seri, dan sebagainya. Gambar berikut ini memperlihatkan banyak elemen bagan yang bisa Anda kustomisasi saat Anda menggunakan pembantu Chart . Artikel ini memperlihatkan kepada Anda cara mengatur beberapa (tidak semua) elemen-elemen ini.

Deskripsi: Gambar memperlihatkan elemen bagan

Membuat Bagan dari Data

Data yang Anda tampilkan dalam bagan bisa berasal dari array, dari hasil yang dikembalikan dari database, atau dari data yang ada dalam file XML.

Menggunakan Array

Seperti yang dijelaskan dalam Pengenalan ASP.NET Pemrograman Halaman Web Menggunakan Sintaks Razor, array memungkinkan Anda menyimpan kumpulan item serupa dalam satu variabel. Anda bisa menggunakan array untuk berisi data yang ingin Anda sertakan dalam bagan Anda.

Prosedur ini memperlihatkan bagaimana Anda bisa membuat bagan dari data dalam array, menggunakan jenis bagan default. Ini juga menunjukkan cara menampilkan bagan di dalam halaman.

  1. Buat file baru bernama ChartArrayBasic.cshtml.

  2. Ganti konten yang sudah ada dengan yang berikut ini:

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

    Kode pertama-tama membuat bagan baru dan mengatur lebar dan tingginya. Anda menentukan judul bagan dengan menggunakan AddTitle metode . Untuk menambahkan data, Anda menggunakan metode .AddSeries Dalam contoh ini, Anda menggunakan nameparameter , xValue, dan yValues metode AddSeries . Parameter name ditampilkan dalam legenda bagan. Parameter xValue berisi array data yang ditampilkan di sepanjang sumbu horizontal bagan. Parameter yValues berisi array data yang digunakan untuk memplot titik vertikal bagan.

    Metode ini Write benar-benar merender bagan. Dalam hal ini, karena Anda tidak menentukan tipe bagan, pembantu Chart merender bagan defaultnya, yang merupakan bagan kolom.

  3. Jalankan halaman di browser. Browser menampilkan bagan.

    Cuplikan layar browser yang menampilkan data bagan.

Menggunakan Kueri Database untuk Data Bagan

Jika informasi yang ingin Anda bagan berada dalam database, Anda bisa menjalankan kueri database lalu menggunakan data dari hasil untuk membuat bagan. Prosedur ini memperlihatkan kepada Anda cara membaca dan menampilkan data dari database yang dibuat dalam artikel Pengantar Bekerja dengan Database di ASP.NET Situs Halaman Web.

  1. Tambahkan folder App_Data ke akar situs web jika folder belum ada.

  2. Di folder App_Data, tambahkan file database bernama SmallBakery.sdf yang dijelaskan dalam Pengantar Bekerja dengan Database di Situs Halaman Web ASP.NET.

  3. Buat file baru bernama ChartDataQuery.cshtml.

  4. Ganti konten yang sudah ada dengan yang berikut ini:

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

    Kode pertama-tama membuka database SmallBakery dan menetapkannya ke variabel bernama db. Variabel ini mewakili Database objek yang dapat digunakan untuk membaca dari dan menulis ke database. Selanjutnya, kode menjalankan kueri SQL untuk mendapatkan nama dan harga setiap produk. Kode membuat bagan baru dan meneruskan kueri database ke bagan tersebut dengan memanggil metode bagan DataBindTable . Metode ini mengambil dua parameter: dataSource parameter adalah untuk data dari kueri, dan xField parameter memungkinkan Anda mengatur kolom data mana yang digunakan untuk sumbu x bagan.

    Sebagai alternatif untuk menggunakan metode ini DataBindTable , Anda dapat menggunakan AddSeries metode pembantu Chart . Metode ini AddSeries memungkinkan Anda mengatur xValue parameter dan yValues . Misalnya, alih-alih DataBindTable menggunakan metode seperti ini:

    .DataBindTable(data, "Name")

    Anda dapat menggunakan AddSeries metode seperti ini:

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

    Keduanya merender hasil yang sama. Metode AddSeries ini lebih fleksibel karena Anda dapat menentukan jenis bagan dan data secara lebih eksplisit, tetapi DataBindTable metode ini lebih mudah digunakan jika Anda tidak memerlukan fleksibilitas tambahan.

  5. Jalankan halaman di browser.

    Cuplikan layar menggunakan Kueri Database untuk Data Bagan.

Menggunakan Data XML

Opsi ketiga untuk pembuatan bagan adalah menggunakan file XML sebagai data untuk bagan. Ini mengharuskan file XML juga memiliki file skema (file.xsd ) yang menjelaskan struktur XML. Prosedur ini memperlihatkan kepada Anda cara membaca data dari file XML.

  1. Di folder App_Data, buat file XML baru bernama data.xml.

  2. Ganti XML yang ada dengan yang berikut ini, yang merupakan beberapa data XML tentang karyawan di perusahaan fiktif.

    <?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. Di folder App_Data, buat file XML baru bernama data.xsd. (Perhatikan bahwa ekstensi kali ini adalah .xsd.)

  4. Ganti XML yang sudah ada dengan yang berikut ini:

    <?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. Di akar situs web, buat file baru bernama ChartDataXML.cshtml.

  6. Ganti konten yang sudah ada dengan yang berikut ini:

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

    Kode pertama kali DataSet membuat objek. Objek ini digunakan untuk mengelola data yang dibaca dari file XML dan mengaturnya sesuai dengan informasi dalam file skema. (Perhatikan bahwa bagian atas kode menyertakan pernyataan using SystemData. Ini diperlukan agar dapat bekerja dengan DataSet objek. Untuk informasi selengkapnya, lihat Pernyataan "Menggunakan" dan Nama yang Sepenuhnya Memenuhi Syarat nanti di artikel ini.)

    Selanjutnya, kode membuat DataView objek berdasarkan himpunan data. Tampilan data menyediakan objek yang dapat diikat bagan — yaitu, baca dan plot. Bagan mengikat ke data menggunakan AddSeries metode , seperti yang Anda lihat sebelumnya saat membuat bagan data array, kecuali bahwa kali xValue ini parameter dan yValues diatur ke DataView objek .

    Contoh ini juga memperlihatkan kepada Anda cara menentukan jenis bagan tertentu. Saat data ditambahkan dalam AddSeries metode , chartType parameter juga diatur untuk menampilkan bagan pai.

  7. Jalankan halaman di browser.

    Cuplikan layar jenis bagan tertentu yang Anda tentukan bagan pai ujian.

Tip

Pernyataan "Menggunakan" dan Nama yang Sepenuhnya Memenuhi Syarat

.NET Framework yang ASP.NET Halaman Web dengan sintaks Razor didasarkan pada ribuan komponen (kelas). Agar dapat dikelola untuk bekerja dengan semua kelas ini, kelas tersebut diatur ke dalam namespace, yang agak seperti pustaka. Misalnya, System.Web namespace berisi kelas yang mendukung komunikasi browser/server, System.Xml namespace berisi kelas yang digunakan untuk membuat dan membaca file XML, dan System.Data namespace berisi kelas yang memungkinkan Anda bekerja dengan data.

Untuk mengakses kelas tertentu dalam .NET Framework, kode perlu mengetahui bukan hanya nama kelas, tetapi juga namespace layanan tempat kelas berada. Misalnya, untuk menggunakan pembantu Chart , kode perlu menemukan System.Web.Helpers.Chart kelas , yang menggabungkan namespace (System.Web.Helpers) dengan nama kelas (Chart). Ini dikenal sebagai nama kelas yang sepenuhnya memenuhi syarat — lokasinya yang lengkap dan tidak ambigu dalam luasnya .NET Framework. Dalam kode, ini akan terlihat seperti berikut:

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

Namun, itu rumit (dan rawan kesalahan) harus menggunakan nama panjang dan sepenuhnya memenuhi syarat ini setiap kali Anda ingin merujuk ke kelas atau pembantu. Oleh karena itu, untuk mempermudah penggunaan nama kelas, Anda dapat mengimpor namespace yang Anda minati, yang biasanya hanya segelintir dari di antara banyak namespace dalam .NET Framework. Jika Anda telah mengimpor namespace layanan, Anda hanya dapat menggunakan nama kelas (Chart) alih-alih nama yang sepenuhnya memenuhi syarat (System.Web.Helpers.Chart). Saat kode Anda berjalan dan menemukan nama kelas, kode dapat melihat hanya di namespace yang telah Anda impor untuk menemukan kelas tersebut.

Saat Anda menggunakan ASP.NET Web Pages dengan sintaks Razor untuk membuat halaman web, Anda biasanya menggunakan set kelas yang sama setiap kali, termasuk WebPage kelas, berbagai pembantu, dan sebagainya. Untuk menyimpan pekerjaan mengimpor namespace yang relevan setiap kali Anda membuat situs web, ASP.NET dikonfigurasi sehingga secara otomatis mengimpor sekumpulan namespace inti untuk setiap situs web. Itu sebabnya Anda belum harus berurusan dengan namespace layanan atau mengimpor hingga sekarang; semua kelas yang telah Anda kerjakan berada di namespace yang sudah diimpor untuk Anda.

Namun, terkadang Anda perlu bekerja dengan kelas yang tidak ada di namespace yang secara otomatis diimpor untuk Anda. Dalam hal ini, Anda dapat menggunakan nama kelas yang sepenuhnya memenuhi syarat, atau Anda dapat mengimpor namespace layanan yang berisi kelas secara manual. Untuk mengimpor namespace, Anda menggunakan using pernyataan (import di Visual Basic), seperti yang Anda lihat dalam contoh sebelumnya artikel.

Misalnya, DataSet kelas berada di System.Data namespace layanan. Namespace System.Data tidak tersedia secara otomatis untuk ASP.NET halaman Razor. Oleh karena itu, untuk bekerja dengan DataSet kelas menggunakan nama yang sepenuhnya memenuhi syarat, Anda dapat menggunakan kode seperti ini:

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

Jika Anda harus menggunakan DataSet kelas berulang kali, Anda dapat mengimpor namespace seperti ini lalu hanya menggunakan nama kelas dalam kode:

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

Anda dapat menambahkan using pernyataan untuk namespace .NET Framework lainnya yang ingin Anda referensikan. Namun, seperti yang disebutkan, Anda tidak perlu sering melakukan ini, karena sebagian besar kelas yang akan Anda kerjakan berada di namespace yang diimpor secara otomatis oleh ASP.NET untuk digunakan di halaman .cshtml dan .vbhtml .

Menampilkan Bagan Di Dalam Halaman Web

Dalam contoh yang telah Anda lihat sejauh ini, Anda membuat bagan lalu bagan dirender langsung ke browser sebagai grafik. Namun, dalam banyak kasus, Anda ingin menampilkan bagan sebagai bagian dari halaman, bukan hanya dengan sendirinya di browser. Untuk melakukannya memerlukan proses dua langkah. Langkah pertama adalah membuat halaman yang menghasilkan bagan, seperti yang telah Anda lihat.

Langkah kedua adalah menampilkan gambar yang dihasilkan di halaman lain. Untuk menampilkan gambar, Anda menggunakan elemen HTML <img> , dengan cara yang sama seperti Anda akan menampilkan gambar apa pun. Namun, alih-alih mereferensikan file .jpg atau .png , elemen mereferensikan <img> file .cshtml yang berisi pembantu Chart yang membuat bagan. Saat halaman tampilan berjalan, <img> elemen mendapatkan output pembantu Chart dan merender bagan.

Cuplikan layar bagan ditampilkan di dalam halaman web.

  1. Buat file bernama ShowChart.cshtml.

  2. Ganti konten yang sudah ada dengan yang berikut ini:

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

    Kode menggunakan <img> elemen untuk menampilkan bagan yang Anda buat sebelumnya di file ChartArrayBasic.cshtml .

  3. Jalankan halaman web di browser. File ShowChart.cshtml menampilkan gambar bagan berdasarkan kode yang terkandung dalam file ChartArrayBasic.cshtml .

Menata Bagan

Pembantu Chart mendukung sejumlah besar opsi yang memungkinkan Anda menyesuaikan tampilan bagan. Anda bisa mengatur warna, font, batas, dan sebagainya. Cara mudah untuk menyesuaikan tampilan bagan adalah dengan menggunakan tema. Tema adalah kumpulan informasi yang menentukan cara merender bagan menggunakan font, warna, label, palet, batas, dan efek. (Perhatikan bahwa gaya bagan tidak menunjukkan tipe bagan.)

Tabel berikut mencantumkan tema bawaan.

Tema Deskripsi
Vanilla Menampilkan kolom merah pada latar belakang putih.
Blue Menampilkan kolom biru pada latar belakang gradien biru.
Green Menampilkan kolom biru pada latar belakang gradien hijau.
Yellow Menampilkan kolom oranye pada latar belakang gradien kuning.
Vanilla3D Menampilkan kolom merah 3-D pada latar belakang putih.

Anda dapat menentukan tema yang akan digunakan saat membuat bagan baru.

  1. Buat file baru bernama ChartStyleGreen.cshtml.

  2. Ganti konten yang sudah ada di halaman dengan yang berikut ini:

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

    Kode ini sama dengan contoh sebelumnya yang menggunakan database untuk data, tetapi menambahkan theme parameter saat membuat Chart objek. Berikut ini memperlihatkan kode yang diubah:

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

  3. Jalankan halaman di browser. Anda melihat data yang sama seperti sebelumnya, tetapi bagan terlihat lebih dipolihkan:

    Cuplikan layar bagan terlihat lebih bergaya.

Menyimpan Bagan

Saat Anda menggunakan pembantu Chart seperti yang telah Anda lihat sejauh ini dalam artikel ini, pembantu membuat ulang bagan dari awal setiap kali dipanggil. Jika perlu, kode untuk bagan juga mengkueri ulang database atau membaca ulang file XML untuk mendapatkan data. Dalam beberapa kasus, melakukan ini bisa menjadi operasi yang kompleks, seperti jika database yang Anda kueri besar, atau jika file XML berisi banyak data. Bahkan jika bagan tidak melibatkan banyak data, proses pembuatan gambar secara dinamis mengambil sumber daya server, dan jika banyak orang meminta halaman atau halaman yang menampilkan bagan, mungkin ada dampak pada performa situs web Anda.

Untuk membantu Anda mengurangi potensi dampak performa pembuatan bagan, Anda dapat membuat bagan saat pertama kali membutuhkannya lalu menyimpannya. Ketika bagan diperlukan lagi, daripada meregenerasinya, Anda hanya dapat mengambil versi yang disimpan dan merendernya.

Anda dapat menyimpan bagan dengan cara berikut:

  • Cache bagan dalam memori komputer (di server).
  • Simpan bagan sebagai file gambar.
  • Simpan bagan sebagai file XML. Opsi ini memungkinkan Anda mengubah bagan sebelum menyimpannya.

Penembolokan Bagan

Setelah membuat bagan, Anda dapat menyimpannya dalam cache. Penembolokan bagan berarti bagan tidak perlu dibuat ulang jika perlu ditampilkan lagi. Saat Anda menyimpan bagan di cache, Anda memberinya kunci yang harus unik untuk bagan tersebut.

Bagan yang disimpan ke cache mungkin dihapus jika server kehabisan memori. Selain itu, cache dihapus jika aplikasi Anda dimulai ulang karena alasan apa pun. Oleh karena itu, cara standar untuk bekerja dengan bagan yang di-cache adalah selalu memeriksa terlebih dahulu apakah tersedia di cache, dan jika tidak, maka untuk membuat atau membuatnya kembali.

  1. Di akar situs web Anda, buat file bernama ShowCachedChart.cshtml.

  2. Ganti konten yang sudah ada dengan yang berikut ini:

    <!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> menyertakan src atribut yang menunjuk ke file ChartSaveToCache.cshtml dan meneruskan kunci ke halaman sebagai string kueri. Kunci berisi nilai "myChartKey". File ChartSaveToCache.cshtml berisi pembantu Chart yang membuat bagan. Anda akan membuat halaman ini sebentar lagi.

    Di akhir halaman ada tautan ke halaman bernama ClearCache.cshtml. Itu adalah halaman yang juga akan segera Anda buat. Anda memerlukan ClearCache.cshtml hanya untuk menguji penembolokan untuk contoh ini — ini bukan tautan atau halaman yang biasanya Anda sertakan saat bekerja dengan bagan yang di-cache.

  3. Di akar situs web Anda, buat file baru bernama ChartSaveToCache.cshtml.

  4. Ganti konten yang sudah ada dengan yang berikut ini:

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

    Kode pertama-tama memeriksa apakah ada yang diteruskan sebagai nilai kunci dalam string kueri. Jika demikian, kode mencoba membaca bagan dari cache dengan memanggil GetFromCache metode dan meneruskannya ke kunci. Jika ternyata tidak ada apa pun dalam cache di bawah kunci tersebut (yang akan terjadi saat pertama kali bagan diminta), kode akan membuat bagan seperti biasa. Setelah bagan selesai, kode menyimpannya ke cache dengan memanggil SaveToCache. Metode tersebut memerlukan kunci (sehingga bagan dapat diminta nanti), dan jumlah waktu bagan harus disimpan dalam cache. (Waktu yang tepat Anda akan menyimpan cache bagan akan bergantung pada seberapa sering Anda berpikir data yang diwakilinya mungkin berubah.) Metode ini SaveToCache juga memerlukan slidingExpiration parameter — jika ini diatur ke true, penghitung waktu habis diatur ulang setiap kali bagan diakses. Dalam hal ini, ini berlaku berarti bahwa entri cache bagan kedaluwarsa 2 menit setelah terakhir kali seseorang mengakses bagan. (Alternatif untuk kedaluwarsa geser adalah kedaluwarsa absolut, yang berarti bahwa entri cache akan kedaluwarsa tepat 2 menit setelah dimasukkan ke dalam cache, tidak peduli seberapa sering entri tersebut diakses.)

    Terakhir, kode menggunakan WriteFromCache metode untuk mengambil dan merender bagan dari cache. Perhatikan bahwa metode ini berada di luar if blok yang memeriksa cache, karena akan mendapatkan bagan dari cache apakah bagan ada untuk memulai atau harus dibuat dan disimpan di cache.

    Perhatikan bahwa dalam contoh, AddTitle metode menyertakan tanda waktu. (Ini menambahkan tanggal dan waktu saat ini — DateTime.Now — ke judul.)

  5. Buat halaman baru bernama ClearCache.cshtml dan ganti kontennya dengan yang berikut ini:

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

    Halaman ini menggunakan pembantu WebCache untuk menghapus bagan yang di-cache di ChartSaveToCache.cshtml. Seperti disebutkan sebelumnya, Anda biasanya tidak harus memiliki halaman seperti ini. Anda membuatnya di sini hanya untuk mempermudah pengujian penembolokan.

  6. Jalankan halaman web ShowCachedChart.cshtml di browser. Halaman menampilkan gambar bagan berdasarkan kode yang terkandung dalam file ChartSaveToCache.cshtml . Catat apa yang dikatakan tanda waktu dalam judul bagan.

    Deskripsi: Gambar bagan dasar dengan tanda waktu dalam judul bagan

  7. Tutup browser.

  8. Jalankan ShowCachedChart.cshtml lagi. Perhatikan bahwa tanda waktu sama seperti sebelumnya, yang menunjukkan bahwa bagan tidak diregenerasi, tetapi dibaca dari cache.

  9. Di ShowCachedChart.cshtml, klik tautan Hapus cache . Ini akan membawa Anda ke ClearCache.cshtml, yang melaporkan bahwa cache telah dihapus.

  10. Klik tautan Kembali ke ShowCachedChart.cshtml, atau jalankan kembali ShowCachedChart.cshtml dari WebMatrix. Perhatikan bahwa kali ini tanda waktu telah berubah, karena cache telah dihapus. Oleh karena itu, kode harus meregenerasi bagan dan memasukkannya kembali ke cache.

Menyimpan Bagan sebagai File Gambar

Anda juga dapat menyimpan bagan sebagai file gambar (misalnya, sebagai file .jpg ) di server. Anda kemudian dapat menggunakan file gambar seperti yang Anda lakukan pada gambar apa pun. Keuntungannya adalah file disimpan daripada disimpan ke cache sementara. Anda dapat menyimpan gambar bagan baru pada waktu yang berbeda (misalnya, setiap jam) lalu menyimpan catatan permanen perubahan yang terjadi dari waktu ke waktu. Perhatikan bahwa Anda harus memastikan bahwa aplikasi web Anda memiliki izin untuk menyimpan file ke folder di server tempat Anda ingin meletakkan file gambar.

  1. Di akar situs web Anda, buat folder bernama _ChartFiles jika belum ada.

  2. Di akar situs web Anda, buat file baru bernama ChartSave.cshtml.

  3. Ganti konten yang sudah ada dengan yang berikut ini:

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

    Kode pertama-tama memeriksa untuk melihat apakah file .jpg ada dengan memanggil File.Exists metode . Jika file tidak ada, kode akan membuat baru Chart dari array. Kali ini, kode memanggil Save metode dan meneruskan path parameter untuk menentukan jalur file dan nama file tempat menyimpan bagan. Di isi halaman, <img> elemen menggunakan jalur untuk menunjuk ke file .jpg untuk ditampilkan.

  4. Jalankan file ChartSave.cshtml .

  5. Kembali ke WebMatrix. Perhatikan bahwa file gambar bernama chart01.jpg telah disimpan di folder _ChartFiles .

Menyimpan Bagan sebagai File XML

Terakhir, Anda dapat menyimpan bagan sebagai file XML di server. Keuntungan menggunakan metode ini daripada penembolokan bagan atau menyimpan bagan ke file adalah Anda dapat mengubah XML sebelum menampilkan bagan jika Anda mau. Aplikasi Anda harus memiliki izin baca/tulis untuk folder di server tempat Anda ingin meletakkan file gambar.

  1. Di akar situs web Anda, buat file baru bernama ChartSaveXml.cshtml.

  2. Ganti konten yang sudah ada dengan yang berikut ini:

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

    Kode ini mirip dengan kode yang Anda lihat sebelumnya untuk menyimpan bagan di cache, kecuali menggunakan file XML. Kode pertama-tama memeriksa untuk melihat apakah file XML ada dengan memanggil File.Exists metode . Jika file memang ada, kode akan membuat objek baru Chart dan meneruskan nama file sebagai themePath parameter . Ini membuat bagan berdasarkan apa pun yang ada di file XML. Jika file XML belum ada, kode akan membuat bagan seperti normal lalu memanggil SaveXml untuk menyimpannya. Bagan dirender menggunakan Write metode , seperti yang telah Anda lihat sebelumnya.

    Seperti halnya halaman yang memperlihatkan penembolokan, kode ini menyertakan tanda waktu dalam judul bagan.

  3. Buat halaman baru bernama ChartDisplayXMLChart.cshtml dan tambahkan markup berikut ke dalamnya:

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

  4. Jalankan halaman ChartDisplayXMLChart.cshtml . Bagan ditampilkan. Catat tanda waktu dalam judul bagan.

  5. Tutup browser.

  6. Di WebMatrix, klik kanan folder _ChartFiles , klik Refresh, lalu buka folder. File XMLChart.xml dalam folder ini dibuat oleh pembantu Chart .

    Deskripsi: Folder _ChartFiles memperlihatkan file XMLChart.xml yang dibuat oleh pembantu Bagan.

  7. Jalankan lagi halaman ChartDisplayXMLChart.cshtml . Bagan memperlihatkan tanda waktu yang sama dengan pertama kali Anda menjalankan halaman. Itu karena bagan sedang dihasilkan dari XML yang Anda simpan sebelumnya.

  8. Di WebMatrix, buka folder _ChartFiles dan hapus file XMLChart.xml .

  9. Jalankan halaman ChartDisplayXMLChart.cshtml sekali lagi. Kali ini, tanda waktu diperbarui, karena pembantu Chart harus membuat ulang file XML. Jika mau, periksa folder _ChartFiles dan perhatikan bahwa file XML kembali.

Sumber Tambahan