Custom Themes তৈরি করা

Highcharts একটি অত্যন্ত কাস্টমাইজযোগ্য লাইব্রেরি, যা আপনাকে আপনার চার্টের চেহারা এবং অনুভূতি সম্পূর্ণভাবে কাস্টমাইজ করতে সহায়ক। Custom Themes তৈরি করার মাধ্যমে আপনি আপনার চার্টের রঙ, ফন্ট, লেআউট এবং অন্যান্য স্টাইলিং পরিবর্তন করতে পারেন। GWT (Google Web Toolkit) ব্যবহার করে Highcharts-এর Custom Themes তৈরি করা সম্ভব এবং আপনি সহজেই JavaScript কোডের মাধ্যমে এটি নিয়ন্ত্রণ করতে পারেন।

এখানে, আমরা দেখব কিভাবে GWT ব্যবহার করে Highcharts-এর Custom Themes তৈরি এবং কাস্টমাইজ করা যায়।

১. Highcharts-এর Theme কাস্টমাইজেশন

Highcharts-এ Themes কাস্টমাইজ করা হয় Highcharts.setOptions() ফাংশন ব্যবহার করে। এই ফাংশনের মাধ্যমে আপনি সাধারণ স্টাইল কাস্টমাইজেশন যেমন রঙ, ফন্ট, গ্রিড লাইন, লেজেন্ড এবং সিরিজের স্টাইল পরিবর্তন করতে পারেন।

উদাহরণ: Highcharts-এর Custom Theme কাস্টমাইজেশন

Highcharts.setOptions({
    chart: {
        backgroundColor: '#f4f4f4'  // চার্টের ব্যাকগ্রাউন্ড রঙ
    },
    title: {
        style: {
            color: '#333',  // শিরোনামের টেক্সট রঙ
            fontSize: '20px',
            fontWeight: 'bold'
        }
    },
    xAxis: {
        gridLineColor: '#ddd',  // X-axis গ্রিড লাইন রঙ
        labels: {
            style: {
                fontSize: '14px',
                color: '#444'
            }
        }
    },
    yAxis: {
        title: {
            style: {
                color: '#666',  // Y-axis শিরোনামের রঙ
                fontSize: '16px'
            }
        },
        gridLineColor: '#f1f1f1'  // Y-axis গ্রিড লাইন রঙ
    },
    legend: {
        enabled: true,
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom',
        borderWidth: 1,
        borderColor: '#ccc',
        backgroundColor: '#f9f9f9',
        itemStyle: {
            color: '#333',
            fontWeight: 'bold',
            fontSize: '12px'
        }
    },
    tooltip: {
        backgroundColor: 'rgba(255, 255, 255, 0.8)',  // টুলটিপের ব্যাকগ্রাউন্ড রঙ
        style: {
            color: '#333',  // টুলটিপের টেক্সট রঙ
            fontSize: '14px'
        }
    }
});

এই কাস্টম থিমের মাধ্যমে:

• চার্টের ব্যাকগ্রাউন্ড পরিবর্তন করা হয়েছে।
• শিরোনাম এবং xAxis, yAxis এর টেক্সট এবং গ্রিড লাইন রঙ কাস্টমাইজ করা হয়েছে।
• লেজেন্ড এবং টুলটিপ এর স্টাইল পরিবর্তন করা হয়েছে।

২. GWT এর মাধ্যমে Highcharts-এর Custom Theme তৈরি

GWT এবং Highcharts ইন্টিগ্রেট করার জন্য JavaScript Native Interface (JSNI) বা JsInterop ব্যবহার করা হয়। GWT অ্যাপ্লিকেশনে Highcharts এর Custom Theme তৈরি করার জন্য নিচে একটি উদাহরণ দেয়া হলো।

GWT কোডে Custom Theme সেট করা

package com.mycompany.myproject.client;

import com.google.gwt.core.client.EntryPoint;

public class HighchartsThemeExample implements EntryPoint {

    @Override
    public void onModuleLoad() {
        // GWT এর মাধ্যমে Highcharts এ Custom Theme ব্যবহার
        setCustomTheme();
    }

    private native void setCustomTheme() /*-{
        $wnd.Highcharts.setOptions({
            chart: {
                backgroundColor: '#f4f4f4'  // চার্টের ব্যাকগ্রাউন্ড রঙ
            },
            title: {
                style: {
                    color: '#333',
                    fontSize: '20px',
                    fontWeight: 'bold'
                }
            },
            xAxis: {
                gridLineColor: '#ddd',
                labels: {
                    style: {
                        fontSize: '14px',
                        color: '#444'
                    }
                }
            },
            yAxis: {
                title: {
                    style: {
                        color: '#666',
                        fontSize: '16px'
                    }
                },
                gridLineColor: '#f1f1f1'
            },
            legend: {
                enabled: true,
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom',
                borderWidth: 1,
                borderColor: '#ccc',
                backgroundColor: '#f9f9f9',
                itemStyle: {
                    color: '#333',
                    fontWeight: 'bold',
                    fontSize: '12px'
                }
            },
            tooltip: {
                backgroundColor: 'rgba(255, 255, 255, 0.8)',
                style: {
                    color: '#333',
                    fontSize: '14px'
                }
            }
        });
    }-*/;
}

এখানে:

• setCustomTheme() ফাংশনে JavaScript কোড ব্যবহার করে Highcharts-এর থিম কাস্টমাইজ করা হয়েছে।
• GWT থেকে JavaScript কোড কল করা হয়েছে যেখানে chart, title, xAxis, yAxis, legend এবং tooltip এর স্টাইল কাস্টমাইজ করা হয়েছে।

৩. GWT এবং Highcharts এর মধ্যে Theme Sharing

Highcharts-এর থিম সেট করার পর, আপনি যে থিমটি তৈরি করেছেন সেটি সবার জন্য শেয়ার করা যায়। এর মাধ্যমে, আপনি একই থিম দিয়ে বিভিন্ন চার্ট তৈরি করতে পারেন। উদাহরণস্বরূপ, একটি কোম্পানির ব্র্যান্ড কালার ব্যবহার করে বিভিন্ন ড্যাশবোর্ড বা রিপোর্ট তৈরি করতে পারবেন।

থিম শেয়ার করার জন্য উদাহরণ

Highcharts.setOptions({
    chart: {
        backgroundColor: '#e5f3f9',  // একটি কোম্পানির ব্র্যান্ড রঙ ব্যবহার
    },
    title: {
        style: {
            color: '#0f4a56',  // ব্র্যান্ড কালার
            fontSize: '24px',
            fontWeight: 'bold'
        }
    },
    xAxis: {
        labels: {
            style: {
                fontSize: '14px',
                color: '#0f4a56'
            }
        }
    },
    yAxis: {
        title: {
            style: {
                color: '#0f4a56'
            }
        }
    }
});

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

৪. Highcharts-এর থিম ফাইল ব্যবহার

Highcharts এর অফিসিয়াল থিম ফাইলগুলোও ব্যবহার করা যেতে পারে, যা বিভিন্ন পেইন্ট স্কিম, ফন্ট, এবং গ্রাফিক্সের জন্য প্রি-ডিফাইনড স্টাইল প্রদান করে। আপনি এই থিম ফাইলগুলো ব্যবহার করে দ্রুত একটি আকর্ষণীয় থিম তৈরি করতে পারেন।

উদাহরণ: Highcharts Official Themes

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/themes/dark-unica.js"></script>

এখানে dark-unica.js থিমটি একটি অফিসিয়াল থিম যা Highcharts এর লুক এবং ফিলকে সম্পূর্ণ পরিবর্তন করে।

সারাংশ

Highcharts-এর Custom Themes তৈরি করে আপনি আপনার চার্টের রঙ, ফন্ট, গ্রিড লাইন, টুলটিপ এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন। GWT ব্যবহার করে Java কোডের মাধ্যমে এই থিম কাস্টমাইজেশন খুব সহজেই করা সম্ভব। আপনি Highcharts-এর setOptions() ফাংশন ব্যবহার করে আপনার থিমের সমস্ত বৈশিষ্ট্য কাস্টমাইজ করতে পারবেন। এর মাধ্যমে আপনার ওয়েব অ্যাপ্লিকেশনগুলিকে আরও আকর্ষণীয়, ইন্টারঅ্যাকটিভ এবং ব্র্যান্ডেড বানানো সম্ভব।