চার্টের ডায়নামিক স্টাইল পরিবর্তন করা

Highcharts এ চার্টের স্টাইল পরিবর্তন করা খুবই সহজ এবং আপনি যেকোনো সময় ডায়নামিকভাবে এটি করতে পারেন। Highcharts এর মাধ্যমে আপনি রUNTIME এ চার্টের রং, ফন্ট, লাইনের স্টাইল, ব্যাকগ্রাউন্ড, টুলটিপ, সিরিজের ডেটা এবং আরও অনেক কিছু পরিবর্তন করতে পারেন। এখানে আমরা দেখব কিভাবে Highcharts এ ডায়নামিক স্টাইল পরিবর্তন করা যায়।

1. চার্টের স্টাইল পরিবর্তন (CSS এর মাধ্যমে)

Highcharts আপনাকে CSS এর মাধ্যমে চার্টের কিছু অংশ যেমন ব্যাকগ্রাউন্ড, লেজেন্ড, টুলটিপ, এক্সিস ইত্যাদি কাস্টমাইজ করার সুযোগ দেয়। আপনি chart, legend, tooltip, xAxis, yAxis এর মতো অংশের স্টাইল CSS দিয়ে পরিবর্তন করতে পারেন।

উদাহরণ: CSS দিয়ে চার্টের স্টাইল পরিবর্তন

.highcharts-background {
  fill: #f0f0f0; /* ব্যাকগ্রাউন্ড রঙ পরিবর্তন */
}

.highcharts-legend {
  font-size: 14px; /* লেজেন্ডের ফন্ট সাইজ পরিবর্তন */
  color: #333333; /* লেজেন্ডের টেক্সট রঙ */
}

এটি আপনার HTML বা CSS ফাইলের মধ্যে যুক্ত করতে হবে, এবং এটি চার্টের স্টাইল পরিবর্তন করবে।

2. JavaScript এর মাধ্যমে ডায়নামিক স্টাইল পরিবর্তন

Highcharts এ JavaScript ব্যবহার করে রUNTIME এ বিভিন্ন স্টাইল পরিবর্তন করা যায়। আপনি chart.update() ফাংশন ব্যবহার করে চার্টের বিভিন্ন অপশন ডায়নামিকভাবে পরিবর্তন করতে পারেন, যেমন সিরিজের রং, লাইন স্টাইল, এক্সিসের লেবেল ইত্যাদি।

উদাহরণ: সিরিজের রং ডায়নামিকভাবে পরিবর্তন করা

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'ডায়নামিক স্টাইল পরিবর্তন'
  },
  series: [{
    name: 'সেলস',
    data: [10, 20, 30, 40, 50]
  }]
});

// সিরিজের রং পরিবর্তন করা
setTimeout(() => {
  var chart = Highcharts.chart('container');
  chart.series[0].update({
    color: '#FF5733'  // নতুন রং
  });
}, 2000);

এখানে, প্রথমে একটি চার্ট তৈরি করা হয়েছে এবং পরে 2 সেকেন্ড পর সিরিজের রং পরিবর্তন করা হয়েছে। chart.series[0].update() ফাংশনের মাধ্যমে সিরিজের রং পরিবর্তন করা হয়।

3. সিরিজের লাইন স্টাইল পরিবর্তন

Highcharts এ আপনি সিরিজের লাইন স্টাইল পরিবর্তন করতে পারেন, যেমন লাইনটি সলিড, ড্যাশড বা ডটেড করা।

উদাহরণ: সিরিজের লাইন স্টাইল পরিবর্তন করা

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'লাইনের স্টাইল পরিবর্তন'
  },
  series: [{
    name: '2024 সেলস',
    data: [10, 20, 30, 40, 50],
    lineWidth: 3 // সলিড লাইন
  }]
});

// লাইনের স্টাইল পরিবর্তন করা
setTimeout(() => {
  var chart = Highcharts.chart('container');
  chart.series[0].update({
    lineWidth: 5,  // লাইন প্রস্থ বাড়ানো
    dashStyle: 'shortdash'  // ড্যাশ স্টাইল
  });
}, 2000);

এখানে, প্রথমে একটি সলিড লাইন ব্যবহার করা হয়েছে এবং পরে ড্যাশ স্টাইল এবং লাইন প্রস্থ পরিবর্তন করা হয়েছে।

4. এক্সিস লেবেল এবং টুলটিপ স্টাইল পরিবর্তন

Highcharts এ আপনি এক্সিস লেবেল এবং টুলটিপের স্টাইলও ডায়নামিকভাবে পরিবর্তন করতে পারেন।

উদাহরণ: এক্সিস লেবেল এবং টুলটিপের স্টাইল পরিবর্তন করা

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'এক্সিস এবং টুলটিপ স্টাইল পরিবর্তন'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    labels: {
      style: {
        color: '#FF5733', // এক্সিস লেবেলের রং পরিবর্তন
        fontSize: '14px'  // এক্সিস লেবেলের ফন্ট সাইজ
      }
    }
  },
  tooltip: {
    backgroundColor: '#FFFFFF', // টুলটিপের ব্যাকগ্রাউন্ড রং
    borderColor: '#FF5733',  // টুলটিপের বর্ডার রং
    style: {
      color: '#000000', // টুলটিপের টেক্সট রং
      fontSize: '16px' // টুলটিপের ফন্ট সাইজ
    }
  },
  series: [{
    name: 'সেলস',
    data: [10, 20, 30, 40, 50]
  }]
});

এখানে xAxis এবং tooltip এর স্টাইল পরিবর্তন করা হয়েছে, যেমন টেক্সটের রং, ফন্ট সাইজ এবং ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।

5. এনিমেশন এবং ট্রানজিশন স্টাইল পরিবর্তন

Highcharts এর মাধ্যমে আপনি চার্টে এনিমেশন এবং ট্রানজিশন যোগ করতে পারেন, যা চার্টের রেন্ডারিংকে আরও প্রাণবন্ত এবং ইন্টারঅ্যাকটিভ করে তোলে।

উদাহরণ: সিরিজের ডেটার এনিমেশন স্টাইল পরিবর্তন

Highcharts.chart('container', {
  chart: {
    type: 'line',
    animation: {
      duration: 1000,  // এনিমেশনটির সময়কাল
      easing: 'easeOutBounce'  // এনিমেশন ইফেক্ট
    }
  },
  title: {
    text: 'এনিমেশন স্টাইল পরিবর্তন'
  },
  series: [{
    name: '2024 সেলস',
    data: [10, 20, 30, 40, 50]
  }]
});

এখানে, animation অপশন দিয়ে এনিমেশন ডিউরেশন এবং easing স্টাইল কাস্টমাইজ করা হয়েছে।

সারাংশ

Highcharts এ ডায়নামিক স্টাইল পরিবর্তন অনেক সহজ এবং কার্যকর। আপনি JavaScript এবং CSS এর মাধ্যমে চার্টের বিভিন্ন অংশের স্টাইল কাস্টমাইজ করতে পারেন, যেমন সিরিজের রং, লাইনের স্টাইল, এক্সিসের লেবেল, টুলটিপের কনটেন্ট এবং এনিমেশন ইফেক্ট। এই কাস্টমাইজেশনগুলি আপনাকে আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করতে সাহায্য করবে।