Chart.js

Chart.js သည် အခန်းကဏ္ဍအခြေခံ HTML ပေါ်တွင် အခြေခံအဆိုပါဆီးပြောင်းသောအချက်အလက် ပြုလုပ်ရန် အပြင်းအထန်ကျွမ်းကျွမ်းသော JavaScript ထိန်းချုပ်ကို ပြုလုပ်ထားသည်。

အဆိုပါ၏ အကျယ်အဝန်းအားဖြင့် အကောင်းဆုံး JavaScript ပြောင်းသောအချက်အလက် ထိုအရာတွင် ပါဝင်သော အဆိုပါဆီးပြောင်းသောအချက်အလက် အမျိုးအစားများပါဝင်သည်:

  • ပုံစံဆီးပြောင်းသောအချက်အလက် (Scatter Plot)
  • အဆိုင်းဆိုင်းဆီးပြောင်းသောအချက်အလက် (Line Chart)
  • ပိုင်းဆိုင်းဆီးပြောင်းသောအချက်အလက် (Bar Chart)
  • ပုစ်ဆိုင်းဆီးပြောင်းသောအချက်အလက် (Pie Chart)
  • ဒိန်းအောင်းဆီးပြောင်းသောအချက်အလက် (Donut Chart)
  • ဘော်ဘီလားဆီးပြောင်းသောအချက်အလက် (Bubble Chart)
  • အဝန်းပြင်တင်ရန် (Area Chart)
  • အခြောက်ခြောက်အနောက်လှိုင်း (Radar Chart)
  • ပေါင်းစပ်အင်တာနက်လက်ရာများ (Mixed Chart)

သို့မဟုတ် အက်ယ်လိုင်း ကို အသုံးပြုတာမူ?

Chart.js သည် လက်ရှိအားဖြင့် အကြမ်းလက် အသုံးပြုနိုင်ပါသည်。

ပထမပေါင်းစပ်သင့် ပေါင်းစပ်တင်ရန် လိုင်းချိန် တစ်ခု သို့ ဆက်ပြီးဖြစ်သည်:

<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>

နောက်ပြီးတွင်，<canvas> ကို တင်ရန် ဖြစ်သော နေရာသို့ ထပ်ထည့်ပါ:

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

canvas အရာသည် ကိုယ်တော်ဝင် id တစ်ခု ဖြစ်သည့်

ရှိပါသည်!

အက္ခရာဆိုင်း ပေါင်းစပ်ဆိုင်းဒိုင်းတင်ရန်:

const myChart = new Chart("myChart", {
  type: "scatter",
  data: {}
  options: {}
});

အက္ခရာဆိုင်း အနောက်လှိုင်းတင်ရန်:

const myChart = new Chart("myChart", {
  
  data: {}
  options: {}
});

အက္ခရာဆိုင်း ပုံစံအခြေခံ:

const myChart = new Chart("myChart", {
  type: "bar",
  data: {}
  options: {}
});

ပေါင်းစပ်ဆိုင်းဒိုင်းတင်ရန်

အိမ်ဆိုင်း ပေါ်ထား vs. ဝါးနှင်း

အစီအစဉ်အရင်း

const xyValues = [
  {x:50, y:7},
  {x:60, y:8},
  {x:70, y:8},
  {x:80, y:9},
  {x:90, y:9},
  {x:100, y:9},
  {x:110, y:10},
  {x:120, y:11},
  {x:130, y:14},
  {x:140, y:14},
  {x:150, y:15}
];
new Chart("myChart", {
  type: "scatter",
  data: {
    datasets: [{
      pointRadius: 4,
      pointBackgroundColor: "rgba(0,0,255,1)"
      data: xyValues
    }]
  },
  options:{...}
});

ကိုယ်တိုင် ကြိုးစားပါ

အနောက်လှိုင်းတင်ရန်

အိမ်ဆိုင်း ပေါ်ထား vs. ဝါးနှင်း

အစီအစဉ်အရင်း

const xValues = [50,60,70,80,90,100,110,120,130,140,150];
const yValues = [7,8,8,9,9,9,10,11,14,14,15];
new Chart("myChart", {
  
  data: {
    labels: xValues,,
    datasets: [{
      backgroundColor:"rgba(0,0,255,1.0)"
      borderColor: "rgba(0,0,255,0.1)"
      data: yValues
    }]
  },
  options:{...}
});

ကိုယ်တိုင် ကြိုးစားပါ

အက်ယ်လာကလိုင်း သည် ဖော်ပြထားသော 0，လည်း ပေါင်းစပ်ဆိုင်းဒိုင်းတင်ရန် နိုင်ပါသည်:

borderColor: "rgba(0,0,0,0)"

ကိုယ်တိုင် ကြိုးစားပါ

အသုံးပြုသော အသုံးစံ

အစီအစဉ်အရင်း

const xValues = [100,200,300,400,500,600,700,800,900,1000];
new Chart("myChart", {
  
  data: {
    labels: xValues,,
    datasets: [{
      data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
      borderColor: "red",
      fill: false
    },{
      data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
      borderColor: "green",
      fill: false
    },{
      data: [300,700,2000,5000,6000,4000,2000,1000,200,100],
      borderColor: "blue",
      fill: false
    }]
  },
  options: {
    legend: {display: false}
  }
});

ကိုယ်တိုင် ကြိုးစားပါ

အကွက်ပုံး

အစီအစဉ်အရင်း

const xValues = [];
const yValues = [];
generateData("x * 2 + 7", 0, 10, 0.5);
new Chart("myChart", {
  
  data: {
    labels: xValues,,
    datasets: [{
      
      pointRadius: 1,
      borderColor: "rgba(255,0,0,0.5)",
      data: yValues
    }]
  },
  options: {...}
});
function generateData(value, i1, i2, step = 1) {
  for (let x = i1; x <= i2; x += step) {
    yValues.push(eval(value));
    xValues.push(x);
  }
}

ကိုယ်တိုင် ကြိုးစားပါ

အဘောင်းပုံး

အကွက်ပုံးနှင့် အတူတူပြီ။ generateData သဘောတူကို ပြောင်းလဲပြီ:

generateData("Math.sin(x)", 0, 10, 0.5);

ကိုယ်တိုင် ကြိုးစားပါ

အကွက်ပုံး

အစီအစဉ်အရင်း

var xValues = ["意大利", "法国", "西班牙", "美国", "阿根廷"];
var yValues = [55, 49, 44, 24, 15];
var barColors = ["red", "green","blue","orange","brown"];
new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,,
    datasets: [{
      backgroundColor: barColors,,
      data: yValues
    }]
  },
  options: {...}
});

ကိုယ်တိုင် ကြိုးစားပါ

တစ်ခုတည်းသော အကွက်တွေအား အစီအစဉ်ပေးပြီ:

var barColors = ["blue"];

ကိုယ်တိုင် ကြိုးစားပါ

အကွက်တွေအားလုံးသည် တစ်ခုတည်းသော အရောင်တစ်ခုသာ ဖြစ်နေသည်:

var barColors = "red";

ကိုယ်တိုင် ကြိုးစားပါ

မတူညီ ပြည့်အောင် အမျိုး

var barColors = [
  "rgba(0,0,255,1.0)",
  "rgba(0,0,255,0.8)",
  "rgba(0,0,255,0.6)",
  "rgba(0,0,255,0.4)",
  "rgba(0,0,255,0.2)",
];

ကိုယ်တိုင် ကြိုးစားပါ

အဆိုးဆိုး အကြိတ်

type ကို "bar" ပြောင်းလဲသည် "horizontalBar"：

type: "horizontalBar",

ကိုယ်တိုင် ကြိုးစားပါ

ဆေးပြား

အကျယ်

new Chart("myChart", {
  type: "pie",
  data: {
    labels: xValues,,
    datasets: [{
      backgroundColor: barColors,,
      data: yValues
    }]
  },
  options: {
    title: {
      display: true,,
      text: "ကမ္ဘာ့ ဝေါင်းစား သန်းချိန်"
    }
  }
});

ကိုယ်တိုင် ကြိုးစားပါ

နှပ်ဆင်းရာ ဂန္ဒ

type ကို "pie" ပြောင်းလဲသည် "doughnut"：

type: "doughnut";

ကိုယ်တိုင် ကြိုးစားပါ