Bermula dengan carta.js: carta baris dan bar

Tutorial ini dibina pada Pengenalan Chart.js sebelumnya, menunjukkan penciptaan garis dan bar carta. Kami akan meneroka pilihan penyesuaian untuk meningkatkan penampilan carta dan perwakilan data.

Carta Talian: Menggambarkan perubahan dari masa ke masa

Carta garis berkesan menggambarkan bagaimana perubahan berubah -ubah berhubung dengan yang lain, sering kali. Sebagai contoh, mereka sesuai untuk memaparkan kelajuan kenderaan dari masa ke masa.

Chart.js memudahkan penciptaan carta garis. Secara lalai, carta dipenuhi dengan rgba(0, 0, 0, 0.1) . Untuk menjadikan warna latar belakang kelihatan, pastikan harta backgroundColor ditetapkan dan harta fill adalah true . Kunci tension membolehkan interpolasi padu tersuai, mempengaruhi lengkung garis antara titik data. Menetapkan stepped ke "middle" mencipta kesan seperti langkah.

Segmen individu antara titik data boleh digayakan secara unik. Contoh ini menunjukkan kelajuan dua kereta:

 const checkspeed = (ctx, color_a, color_b) => ctx.p0.parsed.y> ctx.p1.parsed.y? color_a: color_b;

Biarkan datafirst = {
  Label: "Kereta A - Kelajuan (MPH)",
  Data: [0, 59, 75, 20, 20, 55, 40],
  BorderColor: "Hitam",
  Latar Belakang Color: "Telus",
  BorderDash: [3, 3],
  melangkah: "tengah"
};

Biarkan datasecond = {
  Label: "Kereta B - Kelajuan (MPH)",
  Data: [20, 15, 60, 60, 65, 30, 70],
  BorderColor: "Blue",
  Latar Belakang Color: "Telus",
  segmen: {
        BorderColor: ctx => checkspeed (ctx, 'orangered', 'Yellowgreen'),
  },
};

Biarkan SpeedData = {
  Label: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],
  Dataset: [Datafirst, DataSecond]
};

Biarkan lineChart = carta baru (SpeedCanvas, {
  Jenis: "baris",
  Data: SpeedData
});

Kod ini membandingkan titik data berturut -turut. Jika kelajuan berkurangan, orangered digunakan; Jika tidak, yellowgreen .

Carta bar: pelbagai paksi y untuk kejelasan

Untuk pelbagai dataset dengan skala yang berbeza, menggunakan pelbagai paksi Y meningkatkan kebolehbacaan. Setiap dataset boleh diberikan kepada paksi Y tertentu menggunakan kunci yAxisID .

 biarkan gravitybars = '#f06292';
Let DensityBars = '#4db6ac';

Biarkan DensityData = {
  Label: "Ketumpatan planet (kg/m3)",
  Data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  Latar Belakang Color: DensityBars,
  Yaxisid: "ketumpatan paksi y"
};

Biarkan gravityData = {
  Label: "Graviti Planet (M/S2)",
  Data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  Latar Belakang Color: GravityBars,
  Yaxisid: "Y-Axis-Gravity"
};

Biarkan planetData = {
  Labels: ["Mercury", "Venus", "Earth", "Mars", "Musytari", "Saturn", "Uranus", "Neptune"],
  Dataset: [DensityData, GravityData]
};

Biarkan ChartOptions = {
  BarperCentage: 1,
  KategoriPercentage: 0.8,
  Skala: {
    "ketumpatan y-axis": {
      grid: {
        Warna: DensityBars,
        Tickcolor: DensityBars,
        BorderColor: DensityBars
      },
      Ticks: {
        Warna: DensityBars
      },
      Kedudukan: "Kiri"
    },
    "y-axis-gravity": {
      grid: {
        Warna: GravityBars,
        Tickcolor: GravityBars,
        BorderColor: GravityBars
      },
      Ticks: {
        Warna: GravityBars
      },
      Kedudukan: "Betul"
    }
  }
};

Biarkan Barchart = carta baru (DensityCanvas, {
  Jenis: "Bar",
  Data: PlanetData,
  Pilihan: Chartoptions
});

Contoh ini menggunakan nilai yAxisID yang unik dan menyesuaikan warna grid, tanda, dan sempadan untuk setiap paksi dalam chartOptions . barPercentage dan categoryPercentage Control Bar Spasi.

Kesimpulan

Tutorial ini merangkumi penciptaan dan penyesuaian carta baris dan bar dalam carta.js, membolehkan anda membuat carta visual yang menarik dan bermaklumat. Tutorial seterusnya akan meneroka carta kawasan radar dan kutub.

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