Bermula dengan carta.js: carta kawasan radar dan kutub

Tutorial ini berkembang pada pelajaran carta sebelumnya, yang meliputi carta baris dan bar. Di sini, kami akan meneroka carta kawasan radar dan kutub, yang menawarkan gambaran ringkas diikuti dengan penjelasan terperinci.

Memahami carta radar

Carta baris dan bar cemerlang dalam membandingkan satu atau dua atribut di pelbagai titik data (contohnya, penduduk di seluruh negara Asia). Walau bagaimanapun, apabila membandingkan banyak atribut hanya beberapa titik data (contohnya, sifat tiga cecair), carta radar jauh lebih berkesan. Juga dikenali sebagai carta labah -labah, ia secara efisien menggambarkan dan membandingkan pelbagai pembolehubah.

Seperti yang ditakrifkan oleh Wikipedia, carta radar secara grafik mewakili data multivariate menggunakan paksi yang berasal dari titik pusat. Sudut dan kedudukan relatif paksi umumnya tidak penting.

Mari kita bina carta radar pertama kami. Kami mencapai ini dengan menetapkan 'R' sebagai kunci skala kami dalam kekunci 'X' atau 'Sudut' kepada 'False'. Begitu juga, melumpuhkan animasi putaran dilakukan dengan menetapkan 'animaterotate' kepada 'palsu' dalam objek 'animasi'.

Kod berikut meningkatkan daya tarikan visual carta:

 var chartOptions = {
  Plugin: {
    Tajuk: {
      Paparan: Benar,
      Kedudukan: "Bawah",
      Teks: "Burung Migrasi pada musim yang berbeza"
    },
    legenda: {
      Align: "Center",
      Kedudukan: "Kiri",
      Label: {
        font: {
          Saiz: 16
        }
      }
    }
  },
  Animasi: {
    animaterotate: palsu
  },
  Skala: {
    r: {
      Ticks: {
        font: {
          Saiz: 16
        },
        Warna: "Putih",
        BackdropColor: "Hitam"
      }
    }
  },
  Unsur: {
    arka: {
      Sudut: 180,
      BorderColor: "Hitam"
    }
  }
};

Di luar kawalan animasi, kami telah meletakkan semula legenda di sebelah kiri, meningkatkan kebolehbacaan carta.

Kesimpulan

Tutorial ini menunjukkan aplikasi praktikal carta radar dan kutub dan bagaimana untuk membuat dan menyesuaikannya menggunakan pilihan konfigurasi Chart.js. Tutorial masa depan akan meliputi carta pai, donat, dan gelembung. Untuk sumber dan rangka kerja JavaScript selanjutnya, terokai Envato Market.

Atas ialah kandungan terperinci Bermula dengan carta.js: carta kawasan radar dan kutub. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!