Buat grafik garis dalam contoh kode html

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

inside that main

which was representing coordinate-axes. Then from that 5 div, we will take 4 div and make two div inside each of them. Where 1st div will be representing a point and the other will be representing a line. In the 5th div, we will only make a single div that will be representing the 5th point. Here, We haven’t created any div for the line because we only need 4 lines. There is no need for 5th line.

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

Bagaimana Anda membuat grafik garis dalam HTML?

Buat halaman HTML dengan wadah . Parameter lebar dan tinggi elemen ditetapkan sebagai 100%. Akibatnya, bagan garis akan ditampilkan di seluruh halaman web. add an HTML block-level element and give it a unique ID for further reference. The width and height parameters of the element are set as 100%. As a result, the line chart will render all over the web page.

Bisakah Anda membuat grafik dalam HTML?

js, kita dapat menggambar bagan dan grafik pada halaman web menggunakan elemen kanvas HTML5 . Kita dapat membuat enam jenis grafik menggunakan grafik. js. Dalam artikel ini, mari pelajari cara menggunakan chat js untuk membuat obrolan di aplikasi web HTML.

Bagaimana cara membuat grafik garis dalam JavaScript?

// buat deret garis dengan data yang dipetakan var lineChart = bagan. line(seriesData); // menyetel id wadah untuk bagan bagan garis. wadah('wadah'); . menggambar();

Bagaimana Anda membuat contoh grafik garis?

Untuk menggambar grafik garis, pertama-tama gambar sumbu horizontal dan vertikal. Umur harus diplot pada sumbu horizontal karena independen. Tinggi harus diplot pada sumbu vertikal. Kemudian cari data yang diberikan dan plot titik untuk setiap pasangan nilai