Bermula dengan Chart.js: Pie, Donut, dan Carta Bubble

Tutorial ini akan menerangkan cara membuat carta pai, cincin, dan gelembung menggunakan carta.js. Sebelum ini, kami telah mempelajari empat jenis carta carta.js: carta baris dan carta bar (tutorial 2), serta carta radar dan carta rantau polar (Tutorial 3).

Buat carta pai dan cincin

Carta pai dan carta cincin sangat sesuai untuk menunjukkan perkadaran keseluruhan yang dibahagikan kepada bahagian yang berlainan. Sebagai contoh, carta pai boleh digunakan untuk menunjukkan peratusan singa lelaki, singa wanita dan singa muda dalam safari, atau peratusan undi yang diterima oleh calon yang berbeza dalam pilihan raya.

Carta pai hanya sesuai untuk membandingkan parameter tunggal atau dataset. Harus diingat bahawa carta pai tidak dapat menarik entiti dengan nilai sifar kerana sudut kipas dalam carta pai bergantung pada saiz berangka titik data. Ini bermakna mana -mana entiti dengan bahagian sifar tidak akan dipaparkan pada carta. Begitu juga, nilai negatif tidak boleh ditarik pada carta pai.

Dalam carta.js, anda boleh membuat carta pai dengan menetapkan kekunci type ke pie , dan carta cincin dengan menetapkan kekunci type ke doughnut . Berikut adalah contoh membuat kedua -dua carta:

 var piechart = carta baru (Votescanvas, {
    Jenis: 'Pie',
    Data: VotesData,
    Pilihan: Chartoptions
});

var doughnutchart = carta baru (Votescanvas, {
    Jenis: 'Donut',
    Data: VotesData,
    Pilihan: Chartoptions
});

Mari buat carta pai yang menunjukkan data eksport minyak (unit: bilion dolar AS) untuk lima pengeksport minyak teratas pada tahun 2015.

 var data = {
    Label: [
        "Arab Saudi",
        "Rusia",
        "Iraq",
        "Uae",
        "Kanada"
    ],
    dataset: [
        {
            Data: [133.3, 86.2, 52.2, 51.2, 50.2],
            Latar Belakang: [
                "#FF6384",
                "#63ff84",
                "#84ff63",
                "#8463ff",
                "#6384ff"
            ]
        }]
}; 

Anda boleh menggunakan kekunci yang berbeza untuk mengawal paparan carta di atas, seperti cutout , yang boleh menjadi nombor atau rentetan. Jika ditentukan sebagai nombor, nilai dianggap sebagai nilai piksel; Anda boleh menggunakan kekunci rotation untuk menentukan sudut permulaan carta. Begitu juga, anda juga boleh menggunakan kekunci circumference untuk menentukan sudut di mana carta mengimbas apabila merancang data. Kedua -dua sudut dinyatakan dalam darjah dan bukannya radian.

Dua animasi yang berbeza boleh diaktifkan apabila melukis carta. Anda boleh menggunakan kekunci animateRotate untuk menentukan sama ada carta harus mempunyai animasi putaran. Begitu juga, anda juga boleh menggunakan kekunci animateScale untuk menentukan sama ada graf cincin harus ditingkatkan dari pusat. Nilai animateRotate adalah true secara lalai, dan nilai animateScale adalah false secara lalai.

Seperti biasa, anda boleh menggunakan kekunci backgroundColor , borderColor , dan borderWidth untuk mengawal warna latar belakang, warna sempadan dan lebar sempadan semua titik data. Begitu juga, nilai hover untuk semua sifat ini boleh dikawal menggunakan kunci hoverBackgroundColor , hoverBorderColor , dan hoverBorderWidth .

Berikut adalah kod untuk membuat graf cincin untuk data di atas. Tetapkan nilai rotation ke -90 Tetapkan titik permulaan untuk memutar 90 darjah lawan jam.

 var oildata = {
  Labels: ["Arab Saudi", "Rusia", "Iraq", "UAE", "Kanada"],
  dataset: [
    {
      Data: [133.3, 86.2, 52.2, 51.2, 50.2],
      BackgroundColor: ["#FF6384", "#63ff84", "#84ff63", "#8463ff", "#6384ff"],
      BorderColor: "Hitam",
      BorderWidth: 2
    }
  ]
};

var chartOptions = {
  putaran: -90,
  Cutout: "45%",
  Plugin: {
    Tajuk: {
      Paparan: Benar,
      Kedudukan: "Bawah",
      Teks: "Pengeksport minyak utama pada tahun 2015",
      font: {
        Saiz: 32
      }
    },
    legenda: {
      Kedudukan: "Kiri",
      Align: "Mula"
    }
  },
  Animasi: {
    animaterotate: palsu,
    Animatescale: Benar
  }
};

var donutchart = carta baru (OilCanvas, {
  Jenis: "Donut",
  Data: Oildata,
  Pilihan: Chartoptions
}); 

Buat carta gelembung

Carta gelembung digunakan untuk menarik atau memaparkan tiga dimensi data pada carta ( P1 , P2 , P3 ). Kedudukan dan saiz gelembung menentukan nilai tiga titik data ini. Paksi mendatar mewakili titik data pertama (P1), paksi menegak mewakili titik data kedua ( P2 ), dan kawasan gelembung digunakan untuk mewakili nilai titik data ketiga ( P3 ).

Harus diingat bahawa saiz titik data ketiga tidak diwakili oleh jejari gelembung, tetapi oleh kawasan mereka. Kawasan bulatan adalah berkadar dengan kuadrat jejari. Ini bermakna anda perlu memastikan bahawa radius gelembung yang anda lukis adalah berkadar dengan akar kuadrat saiz titik data ketiga.

Dalam Chart.js, anda boleh membuat carta gelembung dengan menetapkan nilai kekunci type ke bubble . Berikut adalah contoh cara membuat carta gelembung:

 var bubblechart = carta baru (PopCanvas, {
    Jenis: 'Bubble',
    Data: Popdata,
    Pilihan: Chartoptions
});

Mari kita gunakan carta gelembung untuk menarik berat item yang berbeza di dalam bilik. Data carta perlu diluluskan dalam format objek. Objek data perlu mempunyai antara muka berikut untuk menarik dengan betul.

 {
    x:<number> ,
    y:<number> ,
    r:<number>
}</number></number></number>

Perbezaan penting antara carta gelembung dan semua carta lain adalah bahawa radius gelembung tidak skala dengan carta.

Sebagai contoh, lebar bar dalam carta bar meningkat atau berkurangan mengikut saiz carta. Ini tidak akan berlaku dengan carta gelembung. Radius gelembung sentiasa sama dengan bilangan piksel yang tepat yang anda nyatakan. Ini masuk akal kerana dalam jenis carta ini, radius sebenarnya digunakan untuk mewakili data sebenar.

Mari buat carta gelembung untuk merancang bilangan kawanan rusa di lokasi yang berbeza di hutan.

 var popdata = {
  dataset: [
    {
      Label: ["Deer Herd"],
      Data: [
        {x: 100, y: 0, r: 10},
        {x: 60, y: 30, r: 20},
        {x: 40, y: 60, r: 25},
        {x: 80, y: 80, r: 30},
        {x: 20, y: 30, r: 25},
        {x: 0, y: 100, r: 5}
      ],
      Latar BelakangColor: "#FF9966"
    }
  ]
};

Oleh kerana jejari di sini adalah berkadar dengan akar kuadrat nombor sebenar, bilangan rusa di (80, 80) adalah 36 kali bilangan rusa di (0, 100).

Seperti semua jenis carta yang lain, anda boleh menggunakan backgroundColor , borderColor , dan Kekunci borderWidth untuk mengawal warna latar belakang, warna sempadan, dan lebar sempadan mata yang ditarik. Begitu juga, anda juga boleh menggunakan kekunci hoverBackgroundColor , hoverBorderColor , dan hoverBorderWidth untuk menentukan warna latar belakang hover, melegakan warna sempadan, dan melayang lebar sempadan.

Anda juga boleh menggunakan kekunci hoverRadius untuk menentukan radius tambahan untuk menambah gelembung yang berbeza apabila melayang. Ingat bahawa jejari ini akan ditambah kepada nilai asal untuk menarik gelembung melayang. Jika jejari gelembung asal adalah 10 dan hoverRadius ditetapkan kepada 5, radius gelembung pada hover akan sama dengan 15.

 var popdata = {
  dataset: [
    {
      Label: ["Deer Herd"],
      Data: [
        {x: 100, y: 0, r: 10},
        {x: 60, y: 30, r: 20},
        {x: 40, y: 60, r: 25}
      ],
      Latar Belakang Color: "#9966ff",
      HoverbackgroundColor: "#fffff",
      HoverborderColor: "#9966ff",
      HoverborderWidth: 5,
      Hoverradius: 5
    },
    {
      Label: ["Nombor Giraffe"],
      Data: [
        {x: 80, y: 80, r: 30},
        {x: 20, y: 30, r: 25},
        {x: 0, y: 100, r: 5}
      ],
      Latar Belakang Color: "#FF6600",
      HoverbackgroundColor: "#fffff",
      HoverborderColor: "#FF6600",
      HoverborderWidth: 5,
      Hoverradius: 5
    }
  ]
};

var chartOptions = {
  Plugin: {
    Tajuk: {
      Paparan: Benar,
      Kedudukan: "Bawah",
      Teks: "Bilangan haiwan di tempat panas yang berbeza",
      font: {
        Saiz: 20
      }
    },
    legenda: {
      Kedudukan: "Bawah",
      Align: "Pusat"
    }
  },
  susun atur: {
    Padding: 20
  }
};

Parameter di atas akan membuat carta gelembung berikut.

Meringkaskan

Dalam tutorial ini, anda belajar tiga jenis carta lain yang terdapat dalam carta.js. Anda kini boleh memilih jenis carta yang sesuai untuk merancang data dan menetapkan nilai khusus untuk kunci yang berbeza untuk mengawal penampilannya. Dalam tutorial seterusnya, anda akan belajar bagaimana memanipulasi skala untuk jenis carta yang berbeza.

Atas ialah kandungan terperinci Bermula dengan Chart.js: Pie, Donut, dan Carta Bubble. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!