Bagan adalah representasi gambar atau grafis dari visualisasi data, berdasarkan kondisi tertentu Tersedia berbagai jenis bagan seperti Bar Chart, Line Chart, Pie Chart, dll yang digunakan untuk mewakili data penting. Pada artikel ini, kita akan melihat cara membuat diagram Garis menggunakan HTML & CSS
Line Chart adalah grafik yang digunakan untuk menampilkan data berupa titik-titik yang dihubungkan oleh garis lurus. Biasanya digunakan untuk menampilkan data yang berubah dari waktu ke waktu secara terus menerus
Langkah-langkah membuat diagram garis. Disini kita akan melihat langkah-langkah membuat Line Chart dengan menerapkan sedikit ilmu matematika. Terdapat beberapa titik yang akan diplot pada sumbu koordinat, sumbu X dan sumbu Y. Jadi misalkan kita memiliki 5 poin yaitu. , (40,80) , (80,120) , (120,80) , (160,120) , (200,80) dan diambil sumbu x dan sumbu y sebanyak 250 Satuan. Sekarang, kita akan memplot titik-titik ini pada bidang XY menggunakan langkah-langkah berikut
Langkah 1. Buat Pesawat XY. Kami akan menggunakan tag div dan meletakkan pemilih id dengan nama "bagan". Setelah itu, kita akan menerapkan CSS menggunakan sektor id tersebut pada div ini untuk membuatnya seperti XY Plane
<div id="chart"></div>CSS
#chart { border-bottom: 2px solid black; border-left: 2px solid black; margin-left:500px; margin-top: 100px; padding: 0; height: 250px; width:250px; position: relative; }_Saat menerapkan gaya di atas, kita akan melihat keluaran di bawah ini
Langkah 2. Tandai sumbu mana yang merupakan sumbu x dan sumbu mana yang merupakan sumbu y
We will use two
tags inside that div that contains the x-axis and y-axis and after that position it accordingly using CSS.
<div id="chart"> <p id="x1">x-axis</p> <p id="y1">y-axis</p> </div>CSS
#x1, #y1 { position: absolute; font-size: larger; } #x1 { bottom: -50px; left: 100px; } #y1{ left: -60px; bottom: 110px; }Di sini, di CSS, kami telah membuat posisi absolut, sehingga dapat diposisikan relatif terhadap induknya, lalu gunakan kiri dan bawah untuk melakukannya
Langkah 3. Buat Poin dan segmen garis yang menghubungkan titik-titik tersebut
Kami akan membuat 4 set segmen titik dan garis. Pada himpunan tersebut, ruas garis akan dimulai dari titik yang ada pada himpunan tersebut dan menuju ke titik terdekat. Kami juga akan membuat poin yang akan menjadi poin ke-5 kami. Titik ini tidak akan di set dengan ruas garis karena kita hanya membutuhkan 4 garis. Jadi, tidak ada garis yang berasal dari poin ke-5 ini. Hanya satu garis yang akan datang dan terhubung dengan titik ini. Setelah itu, tugas kita adalah memposisikan titik-titik tersebut dan membariskannya sesuai dengan koordinat yang diberikan
Now, we will make 5
Sekarang, kita akan menggunakan Matematika dengan mengambil dua titik terdekat yaitu (40,80) dan (80,120). Jadi panjang garis antara dua titik ini akan menjadi sisi miring dari segitiga siku-siku yang dibuat oleh perbedaan antara koordinat x dan koordinat y. Lihat di bawah Gambar. 1. Sekarang untuk kemiringan, kita akan menggunakan rumus trigonometri berikut
tan(angle) = Perpendicular / Base_Ara. 1
Jadi, kami akan menghitung panjang garis dan kemiringannya untuk setiap ruas garis lainnya. Kami akan menggunakan informasi ini sambil menata setiap segmen garis. Seperti inilah tampilan kode HTML umum kita
<div id="chart"> <p id="x1">x-axis</p> <p id="y1">y-axis</p> <div> <div id="point..."></div> <div id="line..."></div> </div> ... </div>Langkah 4. Menerapkan properti CSS ke titik & Garis tersebut
Sekarang, kita harus menggunakan CSS untuk membuat titik dan garis tersebut terlihat. Kita dapat melihat pada kode HTML di atas bahwa kita telah memberikan “id” untuk setiap div yang mewakili garis dan titik. Kami akan menggunakan pemilih id ini untuk menata garis dan titik. Mari kita lihat CSS untuk satu poin dan demikian pula, akan dilakukan untuk poin lainnya
#point1 { background-color: violet; border-radius: 50%; bottom: 76px; left: 36px; position: absolute; height: 12px; width: 12px; z-index: 1; }_Sekarang, mari kita lihat CSS untuk satu baris, dan demikian pula, akan dilakukan untuk baris lainnya
#line1 { background-color: black; bottom: 80px ; height: 3px; left: 40px; position: absolute; transform: rotate(-45deg); transform-origin: left bottom; width: 56.57px; }Catatan. Anda harus mencatat bahwa rotate() secara default akan memutar garis searah jarum jam jika sudut dilewatkan tanpa tanda apa pun. Jika Anda akan melewati sudut dengan tanda -ve maka itu akan berputar berlawanan arah jarum jam. Misalnya, jika kita melewati 45 derajat maka akan berputar 45 derajat searah jarum jam dan jika kita melewati -45 derajat maka akan melewati 45 derajat berlawanan arah jarum jam