Pre-defined থিম ব্যবহারের নিয়ম

Highcharts একটি শক্তিশালী লাইব্রেরি যা বিভিন্ন প্রি-ডিফাইন্ড থিম (pre-defined themes) সরবরাহ করে, যা আপনার চার্টগুলোর ডিজাইন এবং স্টাইল কাস্টমাইজ করতে সাহায্য করে। GWT (Google Web Toolkit) এর মাধ্যমে Highcharts ব্যবহার করার সময় আপনি সহজেই এই প্রি-ডিফাইন্ড থিমগুলো ইন্টিগ্রেট করতে পারেন। Highcharts এর থিমগুলি চার্টের রঙ, টাইপোগ্রাফি, বর্ডার এবং অন্যান্য স্টাইলিং বৈশিষ্ট্যগুলোকে পরিবর্তন করে আপনার চার্টগুলোকে আরও সুন্দর এবং ইউজার-ফ্রেন্ডলি করে তোলে।

এই লেখায় আমরা আলোচনা করবো কিভাবে GWT অ্যাপ্লিকেশনে Highcharts এর প্রি-ডিফাইন্ড থিম ব্যবহার করা যায়।

১. Highcharts থিমের ব্যবহার শুরু করা

Highcharts এর প্রি-ডিফাইন্ড থিম ব্যবহার করতে, প্রথমে আপনাকে Highcharts এর থিম ফাইলগুলো আপনার প্রকল্পে ইনক্লুড করতে হবে। Highcharts থিম ফাইল সাধারণত highcharts.js এবং themes ফোল্ডারে থাকে। GWT ক্লাসে Highcharts-এ থিম ব্যবহারের জন্য, আপনাকে JSNI (JavaScript Native Interface) ব্যবহার করতে হবে।

প্রথমে Highcharts এবং থিম ফাইল লোড করা

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

এখানে, আমরা dark-unica থিম ব্যবহার করছি যা Highcharts এর একটি প্রি-ডিফাইন্ড থিম। আপনি বিভিন্ন থিম যেমন grid-light, sand-signika, dark-unica ইত্যাদি ব্যবহার করতে পারেন।

২. Pre-defined থিম ব্যবহার করার জন্য GWT কোড

Highcharts এর থিম ব্যবহার করতে হলে GWT-এ JavaScript কোডে থিম লোড করতে হবে। নিচে একটি উদাহরণ দেওয়া হলো, যেখানে আমরা Highcharts এর dark-unica থিম ব্যবহার করেছি।

public native void createChartWithPredefinedTheme(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.setOptions($wnd.Highcharts.theme); // Apply the predefined theme
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Sales Over Time'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
        },
        yAxis: {
            title: {
                text: 'Values'
            }
        },
        series: [{
            name: 'Sales Data',
            data: chartData
        }]
    });
}-*/;

এখানে:

• Highcharts.setOptions($wnd.Highcharts.theme) এই লাইনটি থিম অ্যাপ্লাই করার জন্য ব্যবহৃত হয়েছে। আপনি যেখানে $wnd.Highcharts.theme এর জায়গায় যে কোন থিমের নাম যেমন dark-unica, grid-light বা sand-signika উল্লেখ করতে পারেন।
• chartData হচ্ছে আপনি যে ডেটা ব্যবহার করবেন তা।

৩. ব্যবহারযোগ্য Pre-defined থিম উদাহরণ

Highcharts বেশ কিছু প্রি-ডিফাইন্ড থিম সরবরাহ করে, যেগুলোর মধ্যে জনপ্রিয় থিমগুলোর কয়েকটি নিচে দেওয়া হলো:

• dark-unica: একটি ডার্ক থিম যা অধিকাংশ সাইটের জন্য ভালো।
• grid-light: একটি ক্লিন এবং সাদামাটা থিম যা খুবই হালকা এবং গ্রিডের মতো স্টাইলিং প্রদান করে।
• sand-signika: একটি নরম, আরামদায়ক থিম, যেটি সাধারণত স্যান্ড বা সাগর সম্পর্কিত সাইটে ব্যবহার করা হয়।
• skies: একটি সুন্দর আকাশের থিম, যা আপনাকে সাদা-নীল মিশ্রিত ডিজাইন প্রদান করে।
• neptune: একটি মারিন থিম, যা নীল রঙের ভিত্তিতে তৈরি।

৪. Custom থিম তৈরি করা

আপনি যদি Highcharts-এর প্রি-ডিফাইন্ড থিমের বাইরে একটি কাস্টম থিম তৈরি করতে চান, তবে আপনি Highcharts.setOptions ব্যবহার করে নিজের থিম কনফিগারেশনও দিতে পারেন।

উদাহরণস্বরূপ:

Highcharts.setOptions({
    chart: {
        backgroundColor: '#f5f5f5',
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 5
    },
    title: {
        style: {
            color: '#333',
            fontSize: '20px',
            fontWeight: 'bold'
        }
    },
    xAxis: {
        gridLineColor: '#ddd',
        labels: {
            style: {
                color: '#666',
                fontSize: '14px'
            }
        }
    },
    yAxis: {
        title: {
            style: {
                color: '#333',
                fontSize: '16px'
            }
        }
    }
});

এখানে, আমরা একটি কাস্টম ব্যাকগ্রাউন্ড রঙ, বর্ডার এবং ফন্ট স্টাইল যোগ করেছি।

৫. GWT-এ কাস্টম থিম ইন্টিগ্রেট করা

GWT এর মাধ্যমে Highcharts-এ কাস্টম থিম ইন্টিগ্রেট করার জন্য আপনি JSNI ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

public native void createChartWithCustomTheme(JavaScriptObject chartData) /*-{
    $wnd.Highcharts.setOptions({
        chart: {
            backgroundColor: '#f5f5f5',
            borderWidth: 1,
            borderColor: '#ccc',
            borderRadius: 5
        },
        title: {
            style: {
                color: '#333',
                fontSize: '20px',
                fontWeight: 'bold'
            }
        },
        xAxis: {
            gridLineColor: '#ddd',
            labels: {
                style: {
                    color: '#666',
                    fontSize: '14px'
                }
            }
        },
        yAxis: {
            title: {
                style: {
                    color: '#333',
                    fontSize: '16px'
                }
            }
        }
    });
    $wnd.Highcharts.chart('container', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Custom Theme Chart'
        },
        series: [{
            name: 'Sales Data',
            data: chartData
        }]
    });
}-*/;

এখানে, আমরা Highcharts.setOptions() ব্যবহার করে একটি কাস্টম থিম ইন্টিগ্রেট করেছি।

সারাংশ

Highcharts-এর প্রি-ডিফাইন্ড থিম ব্যবহার করে আপনি খুব সহজেই চার্টের ডিজাইন এবং স্টাইল পরিবর্তন করতে পারেন। GWT এর মাধ্যমে আপনি JavaScript Native Interface (JSNI) ব্যবহার করে এই থিমগুলো চার্টে ইন্টিগ্রেট করতে পারেন। এছাড়া, যদি প্রয়োজন হয়, আপনি কাস্টম থিম তৈরি করে আপনার চার্টের ডিজাইন কাস্টমাইজও করতে পারেন।

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