BAB 3 - CALENDAR CHART AND MAP CHART

PENERAPAN DALAM PERANGKAT LUNAK

3.1 Penerapan Calender Chart dan Maps Chart dalam HTML dan JavaScript

3.1.1 HTML

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser) .

HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet. Supaya dapat menghasilkan tampilan wujud yang terintegerasi Pemformatan hiperteks sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman web dengan perintah-perintah HTML. HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan yang disebut Standard Generalized Markup Language (SGML ).

Sekarang ini HTML merupakan standar Internet yang dikendalikan dan didefinisikan pemakaiannya oleh World Wide Web Consortium (W3C). Pada tahun 1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan Caillau TIM pada saat mereka bekerja di CERN (CERN merupakan lembaga penelitian fisika

Fungsi HTML yang lebih spesifik yaitu :

• Membuat halaman web.
• Menampilkan berbagai informasi di dalam sebuah browser Internet.
• Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

3.1.2 JavaScript

JavaScript adalah bahasa yang digunakan untuk membuat program yang digunakan agar dokument HTML yang ditampilkan pada sebuah Browser menjadi lebih interaktif, tidak sekedar indah saja. JavaScript memberikan beberapa fungsionalitas ke dalam halaman web, sehingga dapat menjadi sebuah program yang disajikan dengan menggunakan antar muka web. JavaScript merupakan bahasa script, yaitu bahasa yang tidak memerlukan kompiler untuk dapat menjalankanya, tetapi cukup dengan Interpreter.

Tidak perlu ada proses kompilasi terlebih dahulu agar program dapat dijalankan. Browser web Netscape Naviagtor dan Internet Exploler adalah salah satu contoh dari salah banyak interpreter, karena kedua browser ini telah dilengkapi dengan Interpreter JavaScript. Tetapi tidak semua browser web dapar menjadi interpreter javascript karena belum tentu browser tersebut dilengkapi dengan interpreter JavaScript.

JavaScript adalah bahasa pemrograman yang ringan dan mudah untuk digunakan. Dengan adanya JavaScript ini, maka kini halaman web tidak sekedar menjadi halaman data dan informasi saja, tetapi juga menjadi suatu program aplikasi dengan antarmuka web.

JavaScript merupakan bahasa pemrograman yang tidak membutuhkan lisensi untuk dapat menggunakanya. Jika browser web yang kita gunakan mendukung JavaScript, maka kita dapat langsung membuat aplikasi berbasis web dengan menggunakan JavaScript.

JavaScript muncul sebagai jawaban atas tantangan dari pengakses web yang mengharapkan halaman web yang ditampilakan dapat lebih dinamis, tidak statis. Dokumen atau halaman web, tidak sekedar digunakan untuk dapat berinteraksi dengan suatu sistem informasi . Karena pada awal perkembangan teknologi dan peneraopan web , halaman-halaman web lebih cenderung sebagai halaman-halaman yang statis, tidak ada suatu daya tarik lain. Selain hanya data dan informasi yang ditampilkan sehingga akan membuat pengunjung web menjadi cepat bosan dan memutuskan untuk beralih ke situs web lain.

Terus pertanyaanya, bagaimanakah caranya membuat halaman web menjadi tidak statis dan menjadi dinamis?? Jawaban pertama keinginan adanya suatu yang dinamis dalam halaman web adalah adanya animasi gambar yang dikemas dalam file gif animasi (animated gif). Tetapi gambar animasi ini ternyata bukanlah jawaban yang sesungguhnya diharapkan, karena secara prinsip, bukan merupakan suatu konsep dinamis yang sesungguhnya.

Ternyata model dinamis yang diinginkan adalah bahwa halaman web yang ditampilkan bisa juga digunakan sebagai aplikasi, sebagaimana aplikasi dalam suatu sistem operasi (aplikasi atau program berbasis teks atau windows). Web sebagai standar antarmuka aplikasi online, haruslah dapat mengakomodasi kebutuhan untuk menjadikanya standar seperti halnya aplikasi dalam mode text atau window, harus memungkinkan adanya intraksi antara pemakai aplikasi dengan halaman web yang sedang ditampilkan. Aplikasi yang ditampilkan pada halaman web harus dapat memberikan informasi atau pun melakukan validasi terhadap masukan yang diberkan oleh pemakai sebelum dikirimkan kepada server untuk diproses.

Untuk menjalankan javascript, kita hanya membutuhkan aplikasi text editor, dan web browser. Javascript memiliki fitur: high-level programing language, client-side, loosely tiped, dan berorientasi objek.

Javascript adalah program dalam bentuk script, yang akan dijalankan oleh interpreter yang telah ditanamkan ke dalam browser web, sehingga browser web dapat mengeksekusi program Javascript. Program Javascript disisipkan ke dalam dokumen HTML dengan ditandai dengan tag yang diawali dengan <Script ...> dan diakhiri dengan </script>. Fungsi adalah salah satu bagian yang paling indah dari Javascript. Sebagai bahasa fungsional Javascript mengimplementasikan fungsi kelas pertama (first class function). Fungsi dapat disimpan dalam variabel, dikembalikan oleh fungsi lain, dan dikirimkan sebagai argumen untuk fungsi lainnya. Implementasi fungsi yang sangat fleksibel seperti ini membuka banyak kesempatan kepada pengembang untuk menuliskan kode yang bukan hanya berjalan dengan baik, tetapi juga sangat elegan dan indah.

Sebuah fungsi membungkus satu atau banyak perintah. Setiap kali kita memanggil fungsi, maka perintah-perintah yang ada di dalam fungsi tersebut dijalankan. Secara umum fungsi digunakan untuk penggunaan kembali kode (code reuse) dan penyimpanan informasi (information hiding). Implementasi fungsi kelas pertama juga memungkinkan kita menggunakan fungsi sebagai unit-unit yang dapat dikombinasikan, seperti layaknya sebuah lego. Dukungan terhadap pemrograman berorientasi objek juga berarti fungsi dapat kita gunakan untuk memberikan perilaku tertentu dari sebuah objek.

3.1.2.1 Contoh Penerapan Maps Chart dalam JavaScript

Saat memuat JavaScript Maps API melalui URL, Anda juga bisa memuat pustaka tambahan melalui penggunaan parameter URL libraries. Libraries adalah modul kode yang menyediakan fungsionalitas tambahan pada JavaScript API utama namun tidak dimuat kecuali jika Anda memintanya secara khusus.

Dalam tag script yang memuat Maps API, atribut async dan parameter callback boleh dihilangkan. Hal ini akan menyebabkan pemuatan API diblokir hingga API selesai diunduh.

Ini mungkin akan memperlambat pemuatan halaman Anda. Namun itu berarti Anda bisa menulis tag script berikutnya dengan anggapan API tersebut sudah dimuat.

Agar peta ditampilkan pada halaman web, kita harus memesan tempatnya. Biasanya, kita melakukan hal ini dengan membuat elemen bernama div dan memperoleh referensi ke elemen ini dalam model objek dokumen (DOM) browser.

<div id="map"></div>, Dalam contoh di atas, kami menggunakan CSS untuk mengatur ketinggian div peta ke "100%". Ini akan diperluas untuk mengepaskan ukurannya pada perangkat seluler. Anda mungkin perlu menyesuaikan nilai-nilai lebar dan tinggi berdasarkan ukuran layar dan pengisi browser. Perhatikan, div biasanya mengambil lebarnya dari elemen yang dimuatnya, dan div kosong biasanya memiliki ketinggian 0. Karena itu, Anda harus selalu mengatur ketinggian secara eksplisit pada <div>.

Ada dua opsi yang diperlukan untuk setiap peta: center dan zoom.

Tingkat Zoom

Resolusi awal untuk menampilkan peta diatur oleh properti zoom, dalam hal ini zoom 0 menyatakan peta bumi yang diperkecil maksimum, dan tingkat zoom yang lebih besar akan memperbesar dengan resolusi lebih tinggi.

Menampilkan peta seluruh Bumi sebagai gambar tunggal akan memerlukan peta yang teramat besar, atau peta kecil dengan resolusi sangat rendah. Akibatnya, gambar peta dalam Google Maps dan Maps API akan dipecah menjadi "petak" peta dan "tingkat zoom". Pada tingkat zoom rendah, satu set kecil petak peta mencakup area yang luas; di tingkat zoom yang lebih tinggi, petak memiliki resolusi lebih tinggi dan mencakup area yang lebih kecil.

Tiga gambar berikut mencerminkan lokasi yang sama dari Tokyo pada tingkat zoom 0, 7 dan 18.

Objek Peta

map = new google.maps.Map(document.getElementById("map"), {...});

Kelas JavaScript yang menyatakan peta adalah kelas Map. Objek di kelas ini mendefinisikan sebuah peta pada halaman. (Anda bisa membuat lebih dari satu instance kelas ini — setiap objek akan mendefinisikan peta terpisah pada halaman.) Kita membuat sebuah instance baru dari kelas ini menggunakan operator new JavaScript.

Bila membuat instance peta baru, Anda menetapkan elemen HTML <div> di halaman sebagai kontainer untuk peta. Simpul HTML adalah anak dari objek document JavaScript, dan kita memperoleh referensi ke elemen ini melalui metode document.getElementById().

Kode ini mendefinisikan variabel (bernama map) dan memberikan variabel itu ke objek Map baru. Fungsi Map() dikenal sebagai konstruktor dan definisinya ditampilkan di bawah ini:

Konstruktor	Keterangan
Map(mapDiv:Node, opts?:MapOptions )	Membuat peta baru dalam kontainer HTML yang diberikan - biasanya elemen DIV - menggunakan parameter (opsional) yang diteruskan.

Memecahkan Masalah

Jika kode Anda tidak berhasil:

• Cari kesalahan ketik. Ingatlah, JavaScript adalah bahasa yang membedakan huruf besar dan kecil.
• Periksa dasar-dasarnya - beberapa masalah yang paling umum terjadi saat awal pembuatan peta. Misalnya:
• Konfirmasikan bahwa Anda telah menetapkan properti zoom dan center di opsi peta Anda.
• Pastikan Anda telah mendeklarasikan elemen div tempat peta akan muncul di layar.
• Pastikan elemen div untuk peta memiliki ketinggian. Secara default, elemen div dibuat dengan ketinggian 0, sehingga tidak terlihat.

3.1.2.2 Contoh Penerapan Calender Chart dalam JavaScript

Sebuah grafik kalender atau kalender modul menampilkan data aktivitas selama beberapa bulan hingga satu tahun kalender penuh. Hal ini berguna untuk membandingkan data dari waktu ke waktu (mirip dengan memanaskan peta) atau untuk menyoroti tanggal tertentu (liburan, ulang tahun, acara khusus). ZingChart menawarkan banyak pilihan set-up dan grafik khusus properti untuk memungkinkan kustomisasi maksimum. Anda dapat menentukan apa tahun untuk menampilkan, awal dan bulan yang berakhir, dan apakah hari pertama grafik kalender Anda dalam seminggu adalah hari Minggu atau Senin.

Anda juga dapat memilih palet warna, mengkonfigurasi skala Anda, memiliki Anda grafik kalender istirahat di dua atau lebih baris, dan sel gaya dengan minggu, bulan, dan hari. Kami menjelaskan bagaimana menampilkan grafik kalender dengan hari bernomor, serta bagaimana format dan gaya tooltips Anda. Untuk grafik kalender lebih, isi Gallery ZingChart kami.

Kalender Set-Up

Selanjutnya, mengatur grafik kalender. Anda harus menentukan tahun kalender. Anda juga dapat memberikan awal bulan Anda, mengakhiri bulan, dan hari pertama minggu itu (Minggu atau Senin). Dalam grafik di bawah ini, tahun ini ditetapkan untuk 2000. kalender dimulai pada bulan Maret dan berakhir pada bulan Oktober, dan hari pertama dalam minggu itu diatur untuk hari Senin.

Catatan: Menentukan tahun kalender diperlukan. Jika tidak grafik Anda akan default untuk menampilkan tahun berjalan.

Tahun kalender

Buat "Pilihan" objek. Menyisipkan "tahun" objek, dan kemudian "text" atribut. Tentukan tahun kalender yang ingin Anda tampilkan. (Tanpa spesifikasi, grafik akan default ke tahun berjalan.)

Catatan: Anda dapat gaya teks tahun Anda dalam objek yang sama, menggunakan atribut styling seperti "font-warna", "font-family", "font-size", "font-weight" ("normal" atau "berani") , dan "font-style" ("normal" atau "miring").

Mulai Bulan

Dalam "Pilihan" Anda objek, menambahkan "mulai bulan" atribut. Memberikan nilai antara 1-12, dengan 1 menunjukkan Januari dan 12 menunjukkan Desember. (Tanpa spesifikasi, kalender akan dimulai pada bulan Januari.)

mengakhiri Bulan

Dalam "Pilihan" Anda objek, menambahkan "akhir bulan" atribut. Memberikan nilai antara 1-12, dengan 1 menunjukkan Januari dan 12 menunjukkan Desember. (Tanpa spesifikasi, kalender akan berakhir pada Desember.)

Hari pertama dari minggu

Dalam "pilihan" objek, memasukkan "firstday" atribut. Anda dapat mengatur nilai hingga Minggu ("s") atau Senin ("m"). (Tanpa spesifikasi, Minggu ditetapkan sebagai hari pertama dari minggu, yang merupakan norma di sebagian besar negara-negara Amerika Utara. Di sebagian besar Eropa, namun, Senin dianggap sebagai hari pertama dalam minggu itu.)

Nilai data

Menyediakan data kalender. Dalam "pilihan" objek, membuat "nilai" Array. Setiap elemen data akan berisi kencan dengan nilai yang sesuai, diformat seperti ini:

Opsional, Anda dapat menambahkan nilai-nilai tambahan. Termasuk mereka sebagai string dalam elemen data yang ingin mereka untuk berhubungan dengan. Nilai-nilai ini tidak secara otomatis terlihat. (Arahkan kursor pada 1 April dan Mei nilai 1 di bawah grafik. "April Mop!" Dan "Mei Bunga!" Tidak termasuk dalam tooltip.) Namun, mereka dapat diakses melalui token (% data info0, % data info1, dll). Lihat Kalender bagian Tooltips bawah ini untuk informasi lebih lanjut.

Dengan data, grafik kalender sekarang terlihat seperti ini:

Listing Programnya seperti di bawah ini:

Kalender-Spesifik Properti

Setelah Anda mengatur kalender dan memasukkan data nilai-nilai Anda, Anda akan ingin menyesuaikan grafik Anda. sifat kalender khusus kami memungkinkan Anda untuk memilih palet warna, mengkonfigurasi skala Anda, lay out baris Anda, membuat label untuk hari kerja Anda dan bulan, dan gaya sel Anda berdasarkan pada hari kerja (1-7), Minggu (1-54) , bulan (1-12), dan / atau hari kalender. Semua perubahan dalam bagian ini dibuat dalam "Pilihan" Anda objek.

Palet warna

Sesuaikan palet warna Anda untuk menampilkan nilai-nilai negatif dan positif pada kalender Anda dan skala. Dalam "Pilihan" Anda objek, membuat "palet" Array. Menyediakan dua warna (negatif dan positif, masing-masing), dipisahkan dengan tanda koma, sebagai RGB atau nilai-nilai heksadesimal.

 

Skala

Grafik saat ini tidak menunjukkan skala kalender secara default. Untuk menampilkannya, menambahkan "skala" objek untuk "pilihan" Anda objek. skala bertindak sebagai indikator, dengan posisi pointer berubah seperti Anda membawa lebih dari sel-sel yang berbeda pada kalender.

 

Anda dapat mengubah orientasi skala Anda (horizontal atau vertikal), gaya label, dan menyesuaikan pointer Anda menggunakan ZingChart bentuk. Dalam grafik di bawah ini, arah skala diubah menjadi satu vertikal, label yang berwarna oranye, dan pointer diwarnai biru dan berubah menjadi bintang tiga titik.

 

skala Orientasi

Gunakan "arah" atribut untuk mengubah orientasi skala Anda. Untuk menampilkan skala horizontal (orientasi default), memberikan "h" nilai. Untuk menampilkan skala vertikal, memberikan "v" nilai.

Catatan: Dengan skala berorientasi vertikal, Anda mungkin perlu menyesuaikan margin Anda. Buat "plotarea" objek, dan menambahkan "margin-right" atribut. Memberikan nilai pixel.

Catatan: Anda juga dapat memposisikan skala Anda dengan menambahkan "x" dan "y" atribut untuk Anda objek "skala". Memberikan persentase atau pixel nilai.

skala Label

Gunakan "label" objek untuk gaya label skala Anda. Anda bisa gaya warna font, keluarga, ukuran, berat (bold), dan gaya (italic). Untuk menentukan warna font, menambahkan "font-warna" atribut. Memberikan warna Anda sebagai heksadesimal atau nilai RGB. Untuk menentukan font (atau keluarga font), menambahkan "font-family" atribut. Tempatkan semua font Anda di satu string, dipisahkan dengan koma. Untuk mengubah ukuran teks Anda, tambahkan "font-size" atribut.

Memberikan nilai pixel. Akhirnya, Anda dapat tebal atau huruf miring teks Anda. Untuk huruf tebal, tambahkan "font-weight" atribut, dan menetapkan nilai untuk "berani". Untuk miring, menambahkan "font-style" atribut, dan menetapkan nilai untuk "miring".

Pointer skala

Gunakan "pointer" objek untuk mengatur jenis dan styling untuk pointer Anda. Berdasarkan bentuk ZingChart, Anda dapat menentukan jenis pointer Anda dengan "tipe" atribut. Pilihan nilai termasuk "segitiga" (default), "persegi", "lingkaran", "berlian", "star3", dan banyak lagi. Anda dapat gaya mereka dengan atribut seperti "background-color" dan "ukuran". Lihat halaman ZingChart Shapes kami untuk informasi lebih lanjut.

Hari kerja (1-7)

Anda dapat memformat dan gaya label pada hari kerja Anda, serta gaya baris pada hari kerja Anda. Dalam "Pilihan" Anda objek, membuat "hari kerja" objek. Anda akan menggunakan "nilai" array untuk mengatur label Anda, sebuah "item" objek untuk gaya mereka, dan "item" objek untuk gaya baris Anda.

Dalam grafik di bawah ini, label hari kerja standar diganti dengan hari disingkat dalam seminggu. Label kemudian ditata muncul oranye. Baris hari kerja untuk hari Minggu dan Sabtu diwarnai indigo.

 

Label pada hari kerja

Gunakan "nilai" array untuk mengatur label pada hari kerja Anda. Anda dapat menyertakan label pada hari kerja seperti berikut untuk kalender Minggu-mulai:

Atau untuk kalender Senin-mulai:

Label Styling

Gunakan "item" (tunggal) objek untuk gaya label pada hari kerja Anda.

Untuk menentukan warna font, menambahkan "font-warna" atribut. Memberikan warna Anda sebagai heksadesimal atau nilai RGB. Untuk menentukan jenis font Anda, menambahkan "font-family" atribut. Tempatkan semua font Anda di satu string, dipisahkan dengan koma. Untuk mengubah ukuran teks Anda, tambahkan "font-size" atribut. Memberikan nilai pixel.

Akhirnya, Anda dapat tebal atau huruf miring teks Anda. Untuk huruf tebal, tambahkan "font-weight" atribut, dan menetapkan nilai untuk "berani". Untuk miring, menambahkan "font-style" atribut, dan menetapkan nilai untuk "miring".

Baris hari kerja

Gunakan "item" (jamak) objek untuk gaya baris pada hari kerja Anda. Membuat objek pada hari kerja spesifik, diformat seperti begitu, di mana Anda dapat menempatkan atribut styling Anda. Ingat bahwa pada hari kerja nilai awal adalah 1, yang mewakili Minggu atau Senin, tergantung pada kalender Anda set-up.

Untuk menentukan warna latar belakang Anda, menambahkan "background-color" atribut. Memberikan warna Anda sebagai heksadesimal atau nilai RGB.

Untuk mengatur tingkat transparansi, menambahkan "alpha" atribut. Memberikan nilai antara 0 dan 1, dengan 0 menjadi transparan dan 1 menjadi buram. Juga, pastikan tanda desimal Anda didahului oleh nol.

Minggu (1-54)

Anda dapat gaya kolom minggu Anda. Dalam "Pilihan" Anda objek, membuat "minggu" objek. Untuk gaya kolom minggu Anda, tambahkan "item" objek. Di dalam, menambahkan objek minggu-spesifik, diformat seperti begitu, di mana Anda dapat menempatkan atribut styling Anda. Ingat bahwa nilai awal minggu adalah 1, yang merupakan minggu pertama Januari.

Untuk mengubah warna latar belakang satu minggu, menambahkan "background-color" atribut. Memberikan warna Anda sebagai heksadesimal atau nilai RGB. Untuk mengubah tingkat transparansi warna, menambah "alpha" atribut. Memberikan nilai antara 0 dan 1, dengan 0 menjadi jelas dan 1 menjadi buram, dan pastikan tanda desimal Anda didahului oleh nol.

Dalam grafik di bawah ini, dua minggu terakhir bulan Desember diwarnai oranye, dengan nilai-nilai transparansi yang berbeda.

 

Bulan (1-12)

Anda dapat memformat dan gaya label Anda bulan, serta gaya sel bulan Anda dan perbatasan. Dalam "Pilihan" Anda objek, membuat "bulan" objek. Anda akan menggunakan "nilai" array untuk mengatur label bulan Anda dan "item" objek untuk gaya mereka. Anda dapat gaya sel bulan Anda dan perbatasan menggunakan "item" objek dan / atau "garis" objek. Dalam grafik di bawah ini, bulan label standar diganti dengan sepenuhnya dibilang bulan. Label kemudian ditata muncul biru.

Bulan Desember diwarnai dan berbatasan biru. Dan perbatasan untuk bulan aktif (yaitu, bulan dengan data nilai) diwarnai indigo. perbatasan bulan yang tersisa ini diwarnai putih.

di bawah ini listing programnya

 
 

Label bulan

Untuk mengatur label bulan Anda, menambahkan "nilai" Array. Anda dapat menyertakan label bulan seperti:

Bila Anda memiliki kalender dengan bulan awal non-Januari, Anda juga dapat menggabungkan nilai-nilai null:

label Styling

Untuk gaya label bulan, gunakan "item" (tunggal) objek.

Untuk menentukan warna font, menambahkan "font-warna" atribut. Memberikan warna Anda sebagai heksadesimal atau nilai RGB. Untuk menentukan jenis font Anda, menambahkan "font-family" atribut. Tempatkan semua font Anda di satu string, dipisahkan dengan koma. Untuk mengubah ukuran teks Anda, tambahkan "font-size" atribut.

Memberikan nilai pixel. Akhirnya, Anda dapat tebal atau huruf miring teks Anda. Untuk huruf tebal, tambahkan "font-weight" atribut, dan menetapkan nilai untuk "berani". Untuk miring, menambahkan "font-style" atribut, dan menetapkan nilai untuk "miring".

Sel bulan Styling

Untuk gaya warna latar belakang dan perbatasan bulan tertentu, gunakan "item" (jamak) objek. Membuat objek bulan-spesifik dalam format berikut, di mana Anda dapat menempatkan atribut styling Anda. Ingat bahwa nilai awal bulan adalah 1, yang mewakili Januari.

Border bulan Styling

Untuk gaya perbatasan bulan aktif dan tidak aktif, menggunakan "garis" objek. Anda bisa gaya perbatasan bulan aktif Anda (misalnya, bulan-bulan yang mengandung nilai-nilai data) dengan menambahkan "aktif" objek, dan menempatkan atribut styling Anda di dalamnya. Perbatasan styling atribut ditempatkan di luar objek yang akan mempengaruhi semua bulan tidak aktif.

Untuk menentukan warna perbatasan Anda, menambahkan "border-color" atribut. Memberikan nilai warna. Untuk menentukan lebar perbatasan Anda, menambahkan "border-width" atribut. Memberikan nilai pixel.

Hari

You can style day cells individually or apply styles across all inactive (i.e., non-values data and/or individually styled) cells. In your "options" object, create a "day" object.

Hari Styling individu

Untuk gaya hari kalender individu, menambahkan "item" objek untuk "hari" Anda objek. Membuat objek hari khusus dalam format berikut, di mana Anda dapat menempatkan atribut styling Anda.

Untuk mengubah warna latar belakang hari, menambahkan "background-color" atribut. Memberikan warna Anda sebagai heksadesimal atau nilai RGB. Untuk mengubah tingkat transparansi warna, menambah "alpha" atribut. Memberikan nilai antara 0 dan 1, dengan 0 menjadi jelas dan 1 menjadi buram. Pastikan tanda desimal Anda didahului oleh nol

 

Berikut di bawah ini adalah sintaksnya :

Aktif Days Styling

Untuk gaya sel hari tidak aktif Anda, menambahkan "tidak aktif" objek untuk "hari" Anda objek. styling atribut yang Anda berikan akan berlaku di semua sel kalender Anda, dengan pengecualian dari hari yang mengandung nilai-nilai data atau styling individual (yaitu, gaya di atas "item" objek).

 

Styling lebih lanjut dan Kustomisasi

Untuk kustomisasi lebih lanjut, Anda memiliki pilihan untuk membuat kalender dengan hari bernomor. Kami juga menjelaskan cara memformat dan gaya tooltips Anda dan memanfaatkan ZingChart token.

Hari kalender bernomor

hari kalender Tak terbilang secara default. Untuk mengubah ini, membuat "plot" objek, dan menempatkan "nilai-kotak" objek di dalamnya. Hal ini akan memaksa hari kalender untuk menampilkan. Anda dapat gaya hari dengan atribut seperti "font-warna", "font-family", "font-size", dan "font-weight" (berubah dari "berani" untuk "normal").

Berikut di bawah ini adalah listing programnya:

Tooltips

tooltips kalender adalah apa yang muncul ketika Anda membawa lebih dari sel-sel yang berisi data nilai. Anda dapat memformat dan gaya teks tooltip Anda, serta menyesuaikan latar belakang dan perbatasan. Untuk memulai, tambahkan "tooltip" objek ke objek grafik Anda.

Memformat Teks dan Token

Untuk menyesuaikan teks tooltip Anda, tambahkan "text" atribut untuk Anda "tooltip" objek. Tempatkan teks yang Anda inginkan di dalam string. Anda dapat menggunakan Chart token untuk menampilkan informasi dari berbagai nilai-nilai Anda. Akan kembali data nilai-nilai Anda, Anda memberikan data Anda dalam format berikut:

The following tokens correspond accordingly:

Values Data	Token
"YYYY-MM-DD"	%data-day
val1	%v
"info0"	"data-info0
"info1", and so on	%data-info1, and so on

Lihat grafik di bawah kami, di mana teks tooltip diformat untuk menampilkan tanggal (% Data-hari) dengan nilai yang sesuai (% v). Arahkan kursor pada tanggal untuk 1 April dan 1 Mei, di mana teks dari opsional tambahan nilai (% Data-info0) menampilkan juga.

Styling tooltip

Anda dapat gaya tooltip teks, latar belakang, dan perbatasan menggunakan atribut styling dibahas dalam dokumen ini. Mereka termasuk "font-warna", "font-family", "font-size", "font-weight", dan "font-style" untuk teks Anda. Sesuaikan latar belakang Anda dengan "background-color" dan "alpha" atribut. Dan menyesuaikan batas Anda dengan "border-color" dan "border-width" atribut. Dalam grafik di bawah ini, tooltips yang ditata sehingga teks dan perbatasan muncul indigo dan latar belakang tampak putih.

 

Berikut di bawah ini adalah listing programnya:

3.2 Penerapan Maps Chart dalam Office

Anda dapat menggunakan Bagan Peta untuk membandingkan nilai-nilai dan menunjukkan kategori di wilayah geografis. Menggunakannya ketika Anda memiliki wilayah geografis dalam data Anda, seperti negara / wilayah, negara, kabupaten atau kode pos.

Nilai tampilan melawan Kategori

Maps dapat menampilkan kedua nilai dan kategori, dan mereka masing-masing memiliki cara yang berbeda untuk menampilkan warna. Nilai-nilai yang diwakili oleh variasi-variasi kecil dua sampai tiga warna. Kategori diwakili oleh warna yang berbeda.

Misalnya, Negara dengan Penduduk menggunakan nilai-nilai. Nilai mewakili jumlah penduduk di setiap negara, dengan masing-masing digambarkan dengan menggunakan spektrum gradien dua warna. Warna untuk masing-masing daerah ditentukan oleh di mana di sepanjang spektrum nilainya jatuh sehubungan dengan orang lain.

Pada contoh berikut, Negara berdasarkan Kategori, kategori akan ditampilkan menggunakan legenda standar untuk menunjukkan kelompok atau afiliasi. Setiap titik data diwakili oleh warna yang sama sekali berbeda.

Membuat Maps Chart

• Anda dapat menyalin data berikut yang kita digunakan untuk contoh kita, atau mengatur sendiri dengan cara yang sama. Mulailah dengan satu kolom untuk lokasi geografis Anda (negara / wilayah, negara bagian atau provinsi, kabupaten atau kode pos), maka nilai-nilai numerik atau kategoris Anda di kolom kedua. Dalam beberapa kasus, Anda mungkin perlu untuk menambah tingkat detail geografis.

 
  

• Pilih setiap sel dalam rentang data.

Tip: Jika Anda belum melakukannya, sekarang akan menjadi saat yang tepat untuk mengatur data Anda sebagai Excel Table. Ini tidak hanya format data dan menambahkan filter untuk Anda, tetapi juga membuat lebih mudah untuk menciptakan PivotTables untuk menganalisanya.

• Klik Insert> Charts> Direkomendasikan Charts, atau Insert> Charts> Peta, lalu pilih chart peta.

Tergantung pada data Anda, Excel akan melihat dulu baik nilai atau kategori peta.

• Setelah Anda tekan OK, Excel akan memasukkan peta Anda.

Memformat grafik Peta Anda

Setelah peta Anda telah dibuat, Anda dapat dengan mudah menyesuaikan desain. Cukup klik pada Peta, lalu pilih dari Desain atau Format tab di Chart Tools tab ribbon.

Anda dapat juga Klik kanan pada grafik dan pilih dari pilihan menu di sana, atau klik dua kali grafik untuk meluncurkan Format Object Task Pane, yang akan muncul di sisi kanan jendela Excel. Ini juga akan mengekspos Peta grafik Pilihan Series tertentu (lihat di bawah).

Catatan: Ada beberapa Peta grafik Pilihan Seri tertentu, namun mereka tidak didukung di perangkat Android atau Excel Mobile. Jika Anda memerlukan beberapa pilihan Peta Series, maka Anda dapat membangun grafik Anda di Excel untuk Windows dan melihatnya pada perangkat Android atau Excel Mobile.

 

• Map Projects - Mengubah proyeksi peta ini
• Map Area - Mengubah tingkat Zoom peta, mulai dari keadaan view / provinsi, sampai ke pandangan dunia.
• Map Labels - Tampilkan nama geografis untuk negara / wilayah. Memilih untuk menampilkan nama berdasarkan fit, atau menampilkan semua label.

Pertanyaan yang Sering Diajukan

Pertanyaan: Ketika saya menggunakan lokasi tertentu, saya berakhir dengan peta kosong dan kesalahan, atau beberapa peta poin saya di negara lain.

Jawaban: Jika Anda menggunakan data di mana mungkin ada lebih dari satu lokasi yang sama di dunia, Maps tidak dapat selalu membedakan tanpa bimbingan lebih. Jika memungkinkan, tambahkan kolom lain ke data Anda untuk membantu Maps tahu di mana mencarinya. Misalnya, data ini tidak akan selalu memetakan cara yang Anda harapkan karena ada banyak tempat di dunia di mana ini adalah nama-nama kabupaten valid.

Namun data harus peta dengan benar jika Anda menambahkan kolom lain untuk tingkat yang lebih tinggi rinci - ini disebut Disambiguasi:

 

Keterbatasan

• Peta grafik hanya dapat merencanakan tingkat tinggi detail geografis, sehingga kota, garis lintang dan bujur, dan pemetaan alamat jalan tidak didukung. Peta grafik juga mendukung tampilan satu dimensi saja, tapi jika Anda membutuhkan rinci multi-dimensi Anda dapat menggunakan fitur 3D peta Excel.
• Membuat peta baru, atau menambahkan data ke peta yang ada membutuhkan koneksi online (terhubung ke layanan Bing Map).
• peta yang ada dapat dilihat tanpa koneksi online.