চার্টের শিরোনাম, এক্সিস এবং লেবেল কনফিগারেশন

Web Development - অ্যাঙ্গুলার হাই চার্ট (Angular High Charts) - বেসিক Highcharts চার্ট তৈরি করা |

Highcharts এর মাধ্যমে চার্ট তৈরি করার সময়, আপনি চার্টের শিরোনাম, এক্সিস এবং লেবেল কনফিগার করতে পারেন। এগুলো চার্টের বোধগম্যতা এবং দৃশ্যমানতা উন্নত করতে সাহায্য করে। এখানে আমরা শিরোনাম, এক্সিস এবং লেবেল কনফিগারেশনের কিছু সাধারণ কনফিগারেশন ব্যাখ্যা করব।


1. চার্টের শিরোনাম কনফিগারেশন

Highcharts এর মাধ্যমে আপনি চার্টের শিরোনাম সহজেই কাস্টমাইজ করতে পারেন। শিরোনামটি চার্টের উপরের দিকে অবস্থান করে এবং এটি ডেটা বা ট্রেন্ডের সংক্ষিপ্ত বর্ণনা প্রদান করে।

শিরোনাম কনফিগারেশন উদাহরণ:

Highcharts.chart('container', {
  title: {
    text: 'সামগ্রিক বিক্রয় বিশ্লেষণ',
    style: {
      color: '#333333',
      fontSize: '18px',
      fontWeight: 'bold'
    }
  },
  // অন্যান্য কনফিগারেশন
});
  • text: শিরোনামের টেক্সট সেট করে।
  • style: শিরোনামের স্টাইল কাস্টমাইজ করার জন্য। এখানে আপনি ফন্টের রং, সাইজ, ফন্ট-ওজন ইত্যাদি কাস্টমাইজ করতে পারেন।

2. এক্সিস কনফিগারেশন

Highcharts এর এক্সিস (অক্ষ) কনফিগারেশন চার্টের অনুভূমিক (x-axis) এবং উল্লম্ব (y-axis) এক্সিসগুলোর জন্য ব্যবহৃত হয়। আপনি এক্সিসের শিরোনাম, স্কেল, লেবেল, টাইপ ইত্যাদি কাস্টমাইজ করতে পারেন।

এক্সিস কনফিগারেশন উদাহরণ:

Highcharts.chart('container', {
  xAxis: {
    categories: ['জানুয়ারি', 'ফেব্রুয়ারি', 'মার্চ', 'এপ্রিল', 'মে'],
    title: {
      text: 'মাস'
    },
    labels: {
      style: {
        color: '#666666',
        fontSize: '12px'
      }
    }
  },
  yAxis: {
    title: {
      text: 'বিক্রয় পরিমাণ'
    },
    labels: {
      style: {
        color: '#666666',
        fontSize: '12px'
      }
    }
  },
  // অন্যান্য কনফিগারেশন
});
  • xAxis: অনুভূমিক এক্সিস কনফিগারেশন।
    • categories: এক্সিসের মান বা ক্যাটেগরি (যেমন মাস)।
    • title: এক্সিসের শিরোনাম।
    • labels: এক্সিস লেবেলের স্টাইল কাস্টমাইজ করা।
  • yAxis: উল্লম্ব এক্সিস কনফিগারেশন।
    • title: উল্লম্ব এক্সিসের শিরোনাম।
    • labels: এক্সিসের লেবেল কাস্টমাইজ করা (যেমন রঙ, ফন্ট সাইজ)।

3. লেবেল কনফিগারেশন

Highcharts এর মাধ্যমে আপনি চার্টের এক্সিস এবং সিরিজের জন্য লেবেল কাস্টমাইজ করতে পারবেন। লেবেলগুলি একটি চার্টের বিভিন্ন অংশের তথ্য প্রদর্শন করে এবং আপনার চার্টকে আরও ইনফর্মেটিভ এবং দৃশ্যমান করে তোলে।

লেবেল কনফিগারেশন উদাহরণ:

Highcharts.chart('container', {
  xAxis: {
    categories: ['জানুয়ারি', 'ফেব্রুয়ারি', 'মার্চ', 'এপ্রিল', 'মে'],
    labels: {
      formatter: function() {
        return this.value.toUpperCase(); // ক্যাটেগরি নামের স্টাইল পরিবর্তন করা
      }
    }
  },
  yAxis: {
    labels: {
      formatter: function() {
        return this.value + ' ইউনিট'; // y-axis লেবেল কাস্টমাইজ করা
      }
    }
  },
  series: [{
    data: [5, 6, 7, 8, 9],
    dataLabels: {
      enabled: true,
      formatter: function() {
        return this.y + ' বিক্রয়'; // সিরিজের ডেটা লেবেল কাস্টমাইজ করা
      }
    }
  }]
});
  • formatter: এটি একটি কাস্টম ফাংশন যা আপনাকে লেবেলের কনটেন্ট কাস্টমাইজ করতে দেয়। আপনি এখানে JavaScript কোড লিখে লেবেলের মান পরিবর্তন করতে পারেন।
  • dataLabels: সিরিজের ডেটার উপর লেবেল প্রদর্শন করতে ব্যবহৃত হয়। enabled: true সেট করলে লেবেল প্রদর্শিত হবে এবং formatter ফাংশন দিয়ে লেবেলের কনটেন্ট কাস্টমাইজ করা যাবে।

সারাংশ

Highcharts ব্যবহার করে আপনি চার্টের শিরোনাম, এক্সিস এবং লেবেল কাস্টমাইজ করতে পারেন, যা চার্টের দৃশ্যমানতা এবং বোধগম্যতা বাড়াতে সাহায্য করে। শিরোনাম, এক্সিস এবং লেবেলগুলি যেভাবে কাস্টমাইজ করা যায় তা ডেটা এবং ব্যবহারকারীর জন্য আরও স্পষ্ট এবং কার্যকর করে তোলে।

Content added By
Promotion