Bagan donat sederhana di css

Dalam tutorial ini, kami akan memvisualisasikan data tentang pangsa pasar global dari platform streaming musik online teratas. Ini adalah contoh informasi yang bagus yang dapat direpresentasikan dengan baik dalam bagan donat

Untuk memastikan kita berada di halaman yang sama, pertama-tama mari kita lihat apa itu bagan donat dan langsung ke bagan

Apa Itu Bagan Donat?

Pada dasarnya, diagram donat (atau diagram donat) adalah diagram lingkaran dengan area potongan di tengahnya yang dapat diisi dengan informasi tambahan. Mereka sering digunakan sebagai cara untuk memvisualisasikan proporsi data kategorikal

Dalam bagan donat, ukuran setiap potongan (atau potongan) menunjukkan jumlah total yang diwakili setiap kategori. Oleh karena itu, jenis visualisasi data ini dapat membantu Anda memahami komposisi proporsional suatu variabel dengan cepat

Sebagai aturan praktis, jumlah kategori yang divisualisasikan dalam grafik bagan donat harus dibatasi beberapa agar representasi tidak berantakan dan menghindari masalah keterbacaan

Pratinjau Bagan Donat JS

Lihatlah bagaimana bagan donat JS akan muncul di akhir tutorial ini. Dan itu akan interaktif

Membuat Bagan Donat JavaScript Dasar

Bagan donat JS yang indah dapat dibuat hanya dalam empat langkah mudah. Bukankah itu musik di telinga kita?

1. Buat halaman HTML
2. Sertakan file JavaScript
3. Tambahkan datanya
4. Tulis beberapa kode charting JS

1. Buat halaman HTML

Hal pertama yang kami lakukan adalah membuat halaman HTML dasar dengan elemen blok yang dirancang untuk menampung bagan donat

Untuk mengidentifikasi ini

nanti di kode, kita beri atribut id. Biarlah hanya "wadah" kali ini

Kami juga menentukan parameter width dan

var data = anychart.data.set([
  ['Spotify', 34],
  ['Apple Music', 21],
  ['Amazon Music', 15],
  ['Tencent apps', 11],
  ['YouTube Music', 6],
  ['Others', 13]
]);

var data = anychart.data.set([
  ['Spotify', 34],
  ['Apple Music', 21],
  ['Amazon Music', 15],
  ['Tencent apps', 11],
  ['YouTube Music', 6],
  ['Others', 13]
]);

var data = anychart.data.set([
  ['Spotify', 34],
  ['Apple Music', 21],
  ['Amazon Music', 15],
  ['Tencent apps', 11],
  ['YouTube Music', 6],
  ['Others', 13]
]);

2. Sertakan file JavaScript

Ada banyak pustaka pembuatan bagan JavaScript di luar sana yang menyediakan fitur siap pakai yang sangat membantu untuk memvisualisasikan data dengan cepat dalam grafik bahkan tanpa banyak keterampilan dan pengalaman teknis. Beberapa dari mereka mendukung bagan donat di luar kotak

Dalam tutorial ini, kami menggunakan pustaka AnyChart JS. Ini adalah solusi yang ringan, kuat, dan fleksibel untuk visualisasi data interaktif. AnyChart juga bagus untuk pemula karena dokumentasi yang ekstensif dan mendetail dan banyak sekali contoh bagan dengan kode sumber yang dapat dimainkan di taman bermain khusus

Jadi, sebagai langkah kedua, mari sertakan file JavaScript yang diperlukan dari CDN library (atau Anda dapat mendownloadnya jika mau)

Pustaka bagan JavaScript AnyChart menampilkan sistem modular untuk memastikan kinerja yang optimal. Untuk membuat bagan donat HTML5 interaktif menggunakannya, kita perlu menambahkan dua skrip — dan — ke bagian halaman HTML

  
    JavaScript Donut Chart
    
    
    
  
    
    
    
  

3. Tambahkan datanya

Bagan donat adalah jenis bagan sederhana yang memerlukan set data yang lugas dan terbatas. Jadi, meskipun AnyChart mendukung beberapa cara untuk memuat data, kami hanya akan meneruskan data secara langsung dengan cara yang tidak merepotkan

Untuk tutorial ini, saya memutuskan untuk mengambil data tentang pangsa pasar aplikasi streaming musik terkemuka, yang saya kumpulkan dari situs web Business of Apps. Jadi, saya hanya menambahkannya seperti yang ditunjukkan di bawah ini

var data = anychart.data.set([
  ['Spotify', 34],
  ['Apple Music', 21],
  ['Amazon Music', 15],
  ['Tencent apps', 11],
  ['YouTube Music', 6],
  ['Others', 13]
]);

Sekarang setelah semuanya siap, mari bersiap untuk melihat bentuk bagan donat dengan menambahkan beberapa kode JavaScript. Pada dasarnya, ini cukup intuitif

4. Tulis kode diagram JS untuk diagram donat kita

Hal pertama yang kami lakukan adalah menambahkan fungsi yang menyertakan semua kode, yang memastikan bahwa kode di dalamnya hanya akan dijalankan setelah halaman siap.

Bagan donat sangat mudah dibuat dengan pustaka JS yang sesuai dan dalam hal ini, sebenarnya hanya beberapa baris kode

Seperti yang telah kita pelajari di atas, bagan donat pada dasarnya adalah bagan pai dengan lubang, seperti cincin secara keseluruhan. Jadi, kita cukup membuat contoh diagram lingkaran dan memberinya nilai radius dalam untuk membuatnya menjadi diagram donat

// create a pie chart with the data
var chart = anychart.pie(data)
// set the chart radius making a donut chart
chart.innerRadius('55%');

Kemudian kita beri judul bagan donat dan atur id penampung sebelum akhirnya menggambar visualisasi yang dihasilkan

chart.title('Music Streaming Apps Global Market Share')
chart.container('container');
chart.draw();

Itu saja — bagan donat interaktif berbasis JavaScript yang berfungsi penuh sudah siap. Bukankah ini sangat mudah?

Perhatikan bahwa legenda dibuat secara otomatis. Selain itu, klik itemnya atau bagian apa saja untuk melihat perilaku mengiris donat interaktif yang keren

Versi awal bagan donat JS dasar ini dengan kode lengkap tersedia di AnyChart Playground dan CodePen

Bagan donat ini dengan jelas menunjukkan bahwa Spotify adalah pemimpin global dan bahwa Spotify dan Apple Music bersama-sama menguasai lebih dari setengah pasar aplikasi streaming musik

Sekarang, mari sesuaikan bagan donat kita agar terlihat lebih keren dan komunikasikan wawasan dengan cara yang lebih jelas

Menyesuaikan Bagan Donat JS

Fitur hebat dari pustaka JavaScript AnyChart adalah bagan donat awal dibuat dengan sangat cepat, lalu ada banyak opsi untuk menyempurnakan bagan sesuka kita

Mari kita lihat beberapa cara menarik untuk membuat bagan donat interaktif kita lebih estetis dan informatif

1. Ubah palet warna
2. Tambahkan label
3. Perbaiki keterangan alat
4. Tambahkan detail ke bagian tengah donat

1. Ubah palet warna

Warna adalah cara termudah namun paling efektif untuk membuat bagan terlihat lebih personal. Karena kami mewakili merek di sini, kami dapat menerapkan warnanya ke visualisasi titik data yang sesuai

Ini cukup tidak rumit di mana kita hanya menentukan palet warna untuk digunakan dan meneruskannya sebagai argumen saat membuat bagan donat

// create a color palette
var palette = anychart.palettes.distinctColors();
  
// set the colors according to the brands
palette.items([
  { color: '#1dd05d' },
  { color: '#000000' },
  { color: '#00a3da' },
  { color: '#156ef2' },
  { color: '#f60000' },
  { color: '#96a6a6' }
]);

// apply the donut chart color palette
chart.palette(palette);

Lihat bagaimana bagan donat kami terlihat dengan warna merek

Versi bagan donat ini tersedia dengan kode di AnyChart Playground dan CodePen

2. Tambahkan label

Karena kami memiliki jumlah segmen yang lebih sedikit dan masing-masing cukup besar, kami dapat menambahkan nama merek bersama dengan angka persentase di dalam setiap irisan bagan donat. Ini akan menghilangkan kebutuhan akan legenda

Sekali lagi, ini sangat sederhana dan dapat dilakukan hanya dengan dua baris kode JS tambahan

// set the position of labels
chart.labels().format('{%x} — {%y}%').fontSize(16);
  
// disable the legend
chart.legend(false);

3. Perbaiki keterangan alat

Itu selalu merupakan ide yang baik untuk membuat tooltip jelas dan menambah nilai. Di bagan donat kami, hanya ada dua poin informasi. nama merek dan persentase saham. Jadi, kita dapat memiliki tooltip dasar dengan informasi tersebut tanpa kekacauan apapun

chart.tooltip().format('Market share: {%PercentValue}%');

4. Tambahkan detail ke bagian tengah donat

Aspek penting dari visualisasi data terletak pada pemanfaatan ruang. Karena bagan donat memiliki bagian tengah yang kosong, kita dapat menggunakannya untuk menampilkan judul dan beberapa informasi lainnya

Mari kita tentukan elemen mandiri dan posisikan di tengah. Bersamaan dengan judul, kami juga menambahkan subjudul yang mewakili pengamatan kami

// create a standalone label
var label = anychart.standalones.label();

// configure the label settings
label
  .useHtml(true)
  .text(
    'Global Market Share of
 Music Streaming Apps' +
    '

Spotify and Apple Music have more
than 50% of the total market share'
  )
  .position('center')
  .anchor('center')
  .hAlign('center')
  .vAlign('middle');

// set the label as the center content
chart.center().content(label);

Hasilnya di bawah ini

Itu dia — bagan donat keren dan funky yang dibuat dengan JavaScript

Anda dapat menemukan kode terakhir untuk bagan donat ini di bawah ini, atau di AnyChart Playground, atau di CodePen

  
    JavaScript Donut Chart
    
    
    
  
    
    
    
  

Kesimpulan

Dalam tutorial ini, kita telah melihat betapa cepat dan mudahnya membuat dan menyesuaikan bagan donat JS interaktif. Ini adalah salah satu bagan paling sederhana untuk dibuat dan oleh karena itu merupakan pilihan yang bagus ketika seseorang mulai mempelajari visualisasi data untuk web

Jika Anda ingin lebih menyempurnakan bagan donat yang baru saja kami buat atau membuat bagan yang sama sekali berbeda untuk kebutuhan Anda sendiri, lihat dokumentasi bagan donat dan jangan lewatkan contoh bagan donat untuk mendapatkan inspirasi. Anda juga dapat melihat jenis bagan lain yang didukung di pustaka visualisasi data JavaScript AnyChart

Harap beri tahu saya jika Anda memiliki pertanyaan tentang membuat atau menggunakan bagan donat atau apa pun yang terkait dengan visualisasi data dan saya akan melakukan yang terbaik untuk menjawab dan membantu

Lanjutkan, mulailah membuat bagan yang berbeda dan terus mendengarkan musik — keduanya bagus untuk kreativitas

Kami di AnyChart ingin berterima kasih kepada Shachee Swadia karena telah membuat tutorial JS Donut Chart yang luar biasa ini

Jika Anda ingin membuat postingan tamu yang keren untuk blog kami, hubungi kami dan mari kita diskusikan

Lihat tutorial pembuatan bagan JavaScript lainnya

sahi    17 Nov 22 1. 02 siang

Harap buat bagan donat dua lapis dengan label khusus di dalam irisan

Hai, silakan periksa jenis visualisasi Bagan Sunburst karena kemungkinan yang Anda cari dan dapat digunakan

Bagaimana Anda membuat bagan donat di HTML CSS?

Bagaimana cara membuat bagan donat?

Apakah diagram lingkaran sama dengan diagram donat?