sparkline

garis mini

Hasilkan grafik mini SVG dengan JavaScript tanpa ketergantungan eksternal apa pun.

Instalasi

Lib ini tersedia sebagai paket NPM. Untuk menginstalnya, gunakan perintah berikut:

 npm install @fnando/sparkline --save

Jika Anda menggunakan Yarn (dan memang seharusnya):

 yarn add @fnando/sparkline

Anda harus memanggil sparkline.sparkline(svg, values, options) secara langsung jika Anda memuat skrip tanpa mengkompilasi skrip Anda (misalnya webpack). Jika tidak, Anda cukup import sparkline from "@fnando/sparkline"; .

API

sparkline(svg, values, options = {})

• svg : Ini adalah referensi <svg> yang harus berisi tiga atribut wajib ( width , height , dan stroke-width ). Atribut-atribut ini digunakan untuk menghitung luas gambar.
• values : Anda bisa menyediakan larik angka atau larik objek yang merespons .value . Jika Anda memiliki struktur data yang berbeda, lihat options.fetch .
• options : Argumen opsional ini memungkinkan Anda untuk menyesuaikan grafik mini lebih lanjut. Opsi yang tersedia adalah:
  • fetch : Gunakan fungsi ini untuk mengembalikan nilai jika Anda memiliki struktur data berbeda yang tidak didukung oleh grafik mini.
  • onmousemove : Dengan menyetel fungsi panggilan balik ini, Anda akan mengaktifkan mode interaktif (kecuali Anda menyetel options.interactive ke false ). Tanda tangan panggilan balik adalah callback(event, datapoint) , di mana datapoint adalah objek yang berisi nilai, koordinat x/y, dan indeks item.
  • onmouseout : Fungsi panggilan balik ini dipanggil setiap kali mouse meninggalkan area SVG. Anda dapat menggunakannya untuk menyembunyikan hal-hal seperti tooltips.
  • spotRadius : Mengatur radius titik. Standarnya adalah 2 .
  • cursorWidth : Mengatur lebar kursor. Standarnya adalah 2 .
  • interactive : Jika true , ini mengaktifkan mode interaktif. Anda tidak perlu menyetel opsi ini jika Anda memberikan panggilan balik onmousemove .

Penggunaan

Ini adalah contoh kerja minimum:

 <!-- width, height and stroke-width attributes must be defined on the target SVG -->
< svg class =" sparkline " width =" 100 " height =" 30 " stroke-width =" 3 " > </ svg >

< script >
  sparkline ( document . querySelector ( ".sparkline" ) , [ 1 , 5 , 2 , 4 , 8 , 3 , 7 ] ) ;
</ script >

Anda dapat mengubah warna dengan mengatur atribut langsung ke elemen SVG atau menggunakan CSS, seperti berikut:

 /* just the line */
. sparkline {
  stroke : red;
  fill : none;
}

/* line with highlight area */
. sparkline {
  stroke : red;
  fill : rgba ( 255 , 0 , 0 , .3 );
}

/* change the spot color */
. sparkline--spot {
  stroke : blue;
  fill : blue;
}

/* change the cursor color */
. sparkline--cursor {
  stroke : orange;
}

/* style fill area and line colors using specific class name */
. sparkline--fill {
  fill : rgba ( 255 , 0 , 0 , .3 );
}

. sparkline--line {
  stroke : red;
}

Contoh

Statis

Tersedia di https://codepen.io/fnando/full/KyZLLV/

Interaktif

Tersedia di https://codepen.io/fnando/full/GOQLVE/

Lisensi

(Lisensi MIT)

Izin dengan ini diberikan, secara gratis, kepada siapa pun yang memperoleh salinan perangkat lunak ini dan file dokumentasi terkait (“Perangkat Lunak”), untuk menggunakan Perangkat Lunak tanpa batasan, termasuk namun tidak terbatas pada hak untuk menggunakan, menyalin, memodifikasi, menggabungkan , mempublikasikan, mendistribusikan, mensublisensikan, dan/atau menjual salinan Perangkat Lunak, dan mengizinkan orang yang menerima Perangkat Lunak untuk melakukan hal tersebut, dengan tunduk pada ketentuan berikut:

Pemberitahuan hak cipta di atas dan pemberitahuan izin ini akan disertakan dalam semua salinan atau sebagian besar Perangkat Lunak.

PERANGKAT LUNAK INI DISEDIAKAN 'APA ADANYA', TANPA JAMINAN APA PUN, TERSURAT MAUPUN TERSIRAT, TERMASUK NAMUN TIDAK TERBATAS PADA JAMINAN KELAYAKAN UNTUK DIPERDAGANGKAN, KESESUAIAN UNTUK TUJUAN TERTENTU, DAN TIDAK ADA PELANGGARAN. DALAM KEADAAN APA PUN PENULIS ATAU PEMEGANG HAK CIPTA TIDAK BERTANGGUNG JAWAB ATAS KLAIM, KERUSAKAN ATAU TANGGUNG JAWAB LAINNYA, BAIK DALAM TINDAKAN KONTRAK, HUKUM ATAU LAINNYA, YANG TIMBUL DARI, DARI ATAU SEHUBUNGAN DENGAN PERANGKAT LUNAK ATAU PENGGUNAAN ATAU HAL-HAL LAIN DALAM PERANGKAT LUNAK.