Cara membuat carta kawasan menggunakan CSS

Gambaran Keseluruhan

Carta kawasan digunakan untuk mewakili set data dalam bentuk grafik. Dengan menggunakan HTML dan CSS kita boleh membuat carta kawasan. Oleh itu, kami akan mencipta dua pembolehubah tersuai sebagai permulaan dan akhir. Pembolehubah tersuai boleh dibuat menggunakan simbol "--" dan nama pembolehubah. Sebagai contoh, buat pembolehubah seperti: -lebar, -tinggi dan -mula.

Algoritma

Langkah 1 - Buat fail HTML dan buka fail dalam editor teks. Tambahkan templat HTML pada fail HTML.

Langkah 2− Sekarang buat bekas div induk dan berikannya nama kelas yang dipanggil carta.

<div class="chart"></div>

Langkah 3 −Buat tag ul untuk mencipta item senarai carta.

<ul class="areaChart"></ul>

Langkah 4−Sekarang gunakan tag li untuk mencipta bar carta

<li> 80% </li>
<li> 50% </li>
<li> 60% </li>
<li> 30% </li>
<li> 100% </li>

Langkah 5− Anda juga boleh menambah pembolehubah tersuai pada teg li dengan mentakrifkan titik mula dan akhir carta.

<li style="--start: 0.6; --end: 0.4;"> 80% </li>
<li style="--start: 0.4; --end: 0.5;"> 50% </li>
<li style="--start: 0.5; --end: 0.3;"> 60% </li>
<li style="--start: 0.3; --end: 0.7;"> 30% </li>
<li style="--start: 0.7; --end: 0.3;"> 100% </li>

Langkah 6− Sekarang buat fail style.css dalam folder yang sama dan pautkan fail style.css ke dokumen HTML.

<link rel="stylesheet" href="style.css">

Langkah 7 − Sekarang untuk bekas 'areaChart' dan semua item senarai.

Langkah 8 − Carta kawasan berjaya dibuat.

Contoh

Dalam contoh ini kami telah mencipta kawasan carta menggunakan Cascading Styles Sheet (CSS) Untuk mencapainya, kami telah mencipta dua fail untuk fail pertama ini ialah fail HTML dan yang lain ialah fail penggayaan mencipta senarai tidak tersusun dengan item senarai Dalam fail HTML kami telah mencipta teg ul dengan set data di dalamnya.

   
   <link rel="stylesheet" href="style.css">
   


   

      

         
 80% 
         
 50% 
         
 60% 
         
 30% 
         
 100% 
      
      
Area chart using CSS
tutorialspoint.com
   

Imej yang diberikan di bawah menunjukkan output contoh di atas, ia menunjukkan kawasan carta yang mengandungi set data yang diwakili dalam bentuk grafik. Kami menetapkan data sebagai pembolehubah tersuai dalam teg li HTML dan menetapkan titik mula dan tamat untuk diwakili dalam carta.

Kesimpulan

Seperti contoh di atas, kami membina carta statik menggunakan HTML dan CSS. Oleh itu, kami juga boleh menjadikan kawasan carta dinamik dengan menggunakan JavaScript atau menyambungkan API kepada label carta. Semasa menggunakan contoh di atas, kita perlu ingat bahawa titik permulaan item senarai pertama harus sama dengan titik akhir item senarai seterusnya. Memandangkan kami menggunakan tag li untuk mencipta bar carta, kami juga boleh menggunakan bekas div atau jadual.

Atas ialah kandungan terperinci Cara membuat carta kawasan menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!