Chart.js

چارٹ.جی سستا جاوا اسکریپٹ لیبری ہے جو ایچ تی ایم ایل پر مبنی چارٹ بنانے کے لئے استعمال کی جاتی ہے。

یہ سب سادھار جاوا اسکریپٹ ویژولائزیشن لیبری کا ایک حصہ ہے، جس میں مندرج چارت کی نوعیتوں موجود ہیں:

  • اسپرتر پلوت (Scatter Plot)
  • لائن چارت (Line Chart)
  • بار چارت (Bar Chart)
  • پائی چارت (Pie Chart)
  • دونات چارت (Donut Chart)
  • بول بچارت (Bubble Chart)
  • نمودار مساحتي (Area Chart)
  • نمودار رادار (Radar Chart)
  • نمودار مخلوط (Mixed Chart)

چگونه Chart.js را استفاده كنيم؟

Chart.js بسیار آسان برای استفاده است.

ابتدا، لینک به CDN (شبکه توزيع محتوا) را اضافه كنيد:

<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 باید یک شناسه منحصر به فرد داشته باشد.

این است که!

قواعد گرامري نمودار نقاط آزاد معمولي:

const myChart = new Chart("myChart", {
  
  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", {
  
  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:{...}
});

خودتان امتحان کنید

اگر borderColor را تنظيم كنيد 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";

خودتان امتحان کنید