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 (مạng توزیع محتوا) را اضافه کنید:

<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", {
  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:{...}
});

ਆਪਣੇ ਹੀ ਕਰੋ

اگر 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";

ਆਪਣੇ ਹੀ ਕਰੋ