Bagaimana Anda membuat diagram lingkaran di javascript?

Kami akan membuat diagram lingkaran untuk dua tim yaitu, TeamA dan TeamB dan skor mereka untuk 5 pertandingan - match1, match2,. match5

Struktur proyek

Kami akan mulai dengan struktur proyek berikut

Di dalam folder css kita akan membuat file default.css. Ini akan berisi stylesheet default

Dan di dalam folder js kita akan membuat file pie.js. Dalam file ini kita akan menulis kode untuk membuat grafik pie

Dan di dalam folder proyek kita akan membuat file pie.html

Sekarang struktur proyek akan terlihat seperti berikut

Ada beberapa file lain yang ditampilkan pada gambar di atas dari tutorial saya yang lain

pai. html

Salin struktur HTML dari index. html dan pastikan Anda menyertakan file javascript jQuery dan ChartJS

Sekarang di head termasuk default. file css yang kita buat dan simpan di folder css

Di dalam body_ buat div dan berikan kelas

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

.pie-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

.pie-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

.pie-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

.pie-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}

Dan terakhir sebelum penutupan tag body_ sertakan kue. js file javascript yang kami buat di dalam folder js

Jadi, sekarang pai kita. html file akan terlihat seperti berikut

  ChartJS - Pie
  


  

    

      
    

    

      
    
  


  
  
  
  

bawaan. css

Default. file css akan berisi yang berikut ini

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

.pie-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}

Pada kode di atas kita mengatur lebar, tinggi dan margin kelas

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

.pie-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

.pie-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}

JavaScript

Untuk menggambar diagram lingkaran kita akan menulis beberapa javascript

Kanvas

Pertama kita akan mendapatkan dua canvas menggunakan id masing-masing

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

.pie-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

.pie-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}

//get the pie chart canvas
var ctx1 = $("#pie-chartcanvas-1");
var ctx2 = $("#pie-chartcanvas-2");

Pilihan

Sekarang kita akan menentukan pilihan untuk grafik. Untuk ini kita akan membuat variabel objek

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

.pie-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}

Ini mirip dengan opsi grafik garis dan Anda dapat merujuk tutorial grafik garis

Kami akan menyetel

//get the pie chart canvas
var ctx1 = $("#pie-chartcanvas-1");
var ctx2 = $("#pie-chartcanvas-2");

Untuk membuat judul untuk grafik pai, kami akan menetapkan yang berikut untuk objek data

//get the pie chart canvas
var ctx1 = $("#pie-chartcanvas-1");
var ctx2 = $("#pie-chartcanvas-2");

• menampilkan. kami menyetel ini ke

  //get the pie chart canvas
  var ctx1 = $("#pie-chartcanvas-1");
  var ctx2 = $("#pie-chartcanvas-2");
  

  _2 untuk memunculkan judul
• posisi. kami menyetel ini ke

  //get the pie chart canvas
  var ctx1 = $("#pie-chartcanvas-1");
  var ctx2 = $("#pie-chartcanvas-2");
  

  _3 untuk membuat judul muncul di bagian atas grafik pai
• teks. ini disetel ke

  //get the pie chart canvas
  var ctx1 = $("#pie-chartcanvas-1");
  var ctx2 = $("#pie-chartcanvas-2");
  

  _4
• ukuran huruf. ini mengontrol ukuran font judul
• warna huruf. ini mengontrol warna font judul

Untuk membuat legenda bagan pai, kami menyetel properti

//get the pie chart canvas
var ctx1 = $("#pie-chartcanvas-1");
var ctx2 = $("#pie-chartcanvas-2");

• menampilkan. ini disetel ke

  //get the pie chart canvas
  var ctx1 = $("#pie-chartcanvas-1");
  var ctx2 = $("#pie-chartcanvas-2");
  

  _2 untuk menampilkan legenda
• posisi. ini disetel ke

  //get the pie chart canvas
  var ctx1 = $("#pie-chartcanvas-1");
  var ctx2 = $("#pie-chartcanvas-2");
  

  _7 yang menentukan posisi legenda
• label. ini untuk warna dan ukuran font legenda

Anda dapat memeriksa dokumentasi ChartJS dan mengatur beberapa properti lainnya juga. Tapi untuk tutorial ini kita akan tetap berpegang pada properti yang disebutkan di atas

Jadi, opsinya akan terlihat seperti berikut ini

//options
var options = {
  responsive: true,
  title: {
    display: true,
    position: "top",
    text: "Pie Chart",
    fontSize: 18,
    fontColor: "#111"
  },
  legend: {
    display: true,
    position: "bottom",
    labels: {
      fontColor: "#333",
      fontSize: 16
    }
  }
};

Data

Sekarang saatnya membuat dua variabel data

//get the pie chart canvas
var ctx1 = $("#pie-chartcanvas-1");
var ctx2 = $("#pie-chartcanvas-2");

//get the pie chart canvas
var ctx1 = $("#pie-chartcanvas-1");
var ctx2 = $("#pie-chartcanvas-2");

• label. ini adalah larik yang berisi nama yang cocok
• kumpulan data. ini adalah larik dua objek, satu untuk setiap skor tim

Setiap elemen objek dari

//options
var options = {
  responsive: true,
  title: {
    display: true,
    position: "top",
    text: "Pie Chart",
    fontSize: 18,
    fontColor: "#111"
  },
  legend: {
    display: true,
    position: "bottom",
    labels: {
      fontColor: "#333",
      fontSize: 16
    }
  }
};

• label. label yang akan ditampilkan saat mouse mengarahkan pai
• data. array yang berisi skor untuk setiap pertandingan
• warna latar belakang. array nilai hex atau nama warna untuk segmen pai
• borderColor. array nilai hex atau nama warna untuk segmen pai
• borderWidth. ini untuk lebar batas segmen pai

Instansiasi kelas Bagan

Kami membuat dua variabel chart1 dan chart2 dan instantiate kelas Chart. Kami melewati

//options
var options = {
  responsive: true,
  title: {
    display: true,
    position: "top",
    text: "Pie Chart",
    fontSize: 18,
    fontColor: "#111"
  },
  legend: {
    display: true,
    position: "bottom",
    labels: {
      fontColor: "#333",
      fontSize: 16
    }
  }
};

//options
var options = {
  responsive: true,
  title: {
    display: true,
    position: "top",
    text: "Pie Chart",
    fontSize: 18,
    fontColor: "#111"
  },
  legend: {
    display: true,
    position: "bottom",
    labels: {
      fontColor: "#333",
      fontSize: 16
    }
  }
};

Objek data berisi properti

//options
var options = {
  responsive: true,
  title: {
    display: true,
    position: "top",
    text: "Pie Chart",
    fontSize: 18,
    fontColor: "#111"
  },
  legend: {
    display: true,
    position: "bottom",
    labels: {
      fontColor: "#333",
      fontSize: 16
    }
  }
};

//options
var options = {
  responsive: true,
  title: {
    display: true,
    position: "top",
    text: "Pie Chart",
    fontSize: 18,
    fontColor: "#111"
  },
  legend: {
    display: true,
    position: "bottom",
    labels: {
      fontColor: "#333",
      fontSize: 16
    }
  }
};

//options
var options = {
  responsive: true,
  title: {
    display: true,
    position: "top",
    text: "Pie Chart",
    fontSize: 18,
    fontColor: "#111"
  },
  legend: {
    display: true,
    position: "bottom",
    labels: {
      fontColor: "#333",
      fontSize: 16
    }
  }
};

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

.pie-chart-container {
  height: 360px;
  width: 360px;
  float: left;
}

Apa itu diagram lingkaran dalam JavaScript?

Bagaimana Anda membuat bagan dalam JavaScript?

Bagaimana Anda membuat diagram lingkaran dalam HTML?

Bagaimana cara membuat bagan khusus dalam JavaScript?