آموزش رسم نمودار با Highcharts (جلسه 11) - نمودارهای سطحی - قسمت 2

‏  12 دقیقه
۰۱ خرداد ۱۳۹۵

در این جلسه با ادامه موضوع مربوط به رسم نمودار با Highcharts در خدمتتون هستم. highcharts

نمونه سوم : نمودار سطحی بصورت Normal Stack

نمودارهای ستونی و سطحی میتونن بجای اینکه با هم دیگه غاطی و مخلوط بشن، Stack بشن و هر کدام بالای دیگری نمایش داده بشه. به دو صورت میتونین این عمل Stack شدن رو اعمال کنید. یکی normal هست و دیگری percent. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:

<html>

<head>
    <title>Highcharts Tutorial</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
</head>

<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    <script language="JavaScript">
    $(document).ready(function() {
        var chart = {
            type: 'area'
        };
        var title = {
            text: 'Historic and Estimated Worldwide Population Growth by Region'
        };
        var subtitle = {
            text: 'Source: Wikipedia.org'
        };
        var xAxis = {
            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        };
        var yAxis = {
            title: {
                text: 'Billions'
            },
            labels: {
                formatter: function() {
                    return this.value / 1000;
                }
            }
        };
        var tooltip = {
            shared: true,
            valueSuffix: ' millions'
        };
        var plotOptions = {
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        };
        var credits = {
            enabled: false
        };
        var series = [{
            name: 'Asia',
            data: [502, 635, 809, 947, 1402, 3634, 5268]
        }, {
            name: 'Africa',
            data: [106, 107, 111, 133, 221, 767, 1766]
        }, {
            name: 'Europe',
            data: [163, 203, 276, 408, 547, 729, 628]
        }, {
            name: 'America',
            data: [18, 31, 54, 156, 339, 818, 1201]
        }, {
            name: 'Oceania',
            data: [2, 2, 2, 6, 13, 30, 46]
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.plotOptions = plotOptions;
        json.credits = credits;
        json.series = series;
        $('#container').highcharts(json);

    });
    </script>
</body>

</html>

میبینید که در ابتدا کدی بصورت زیر رو قرار دادیم:

var chart = {
    type: 'area'
};

با استفاده از ویژگی type، نوع نمودار را area یا سطحی در نظر گرفتیم.  برای محور x کدهای زیر رو قرار دادیم:

var xAxis = {
   categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
   tickmarkPlacement: 'on',
   title: {
       enabled: false
   }
};

میبینید که با استفاده از ویژگی categories عناوینی که بر روی محور x قصد داریم قرار بگیره رو مشخص کردیم. با on قرار دادن ویژگی tickmarkPlacement باعث میشه که خطهای ریز موجود بر محور افقی، دقیقا در محل همون نقاطی که در categories مشخص کردیم قرار بگیرن. بعد از اون title رو هم برای محور افقی غیرفعال کردیم و نمایش نمیدیم.

اصلی‌ترین قسمت این کد مربوط به کدهای plotOptions هست:

var plotOptions = {
   area: {
       stacking: 'normal',
       lineColor: '#666666',
       lineWidth: 1,
       marker: {
           lineWidth: 1,
           lineColor: '#666666'
       }
   }
};

میبینید که درون خصوصیت Area، مقدار ویژگی stacking رو برابر با normal قرار دادیم. اگه اینکارو نمیکردیم نمودار بصورت زیر نمایش داده میشد:normal stack

همونطور که دیدید نمودارها با هم غاطی شده. اگر از normal stacking استفاده کنیم بصورت زیر خواهد شد و خیلی مرتب‌تر میشه:normal stack 2

نمونه چهارم : نمودار سطحی بصورت percent stack

این نمودار تقاوتی که با نمودار قبلی داره اینه که، در اینجا بصورت percent stack هست و کل فضای عمودی رو میگیره و بصورت درصدی اونا رو نمایش میده. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:

<html>

<head>
    <title>Highcharts Tutorial</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
</head>

<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    <script language="JavaScript">
    $(document).ready(function() {
        var chart = {
            type: 'area'
        };
        var title = {
            text: 'Historic and Estimated Worldwide Population Growth by Region'
        };
        var subtitle = {
            text: 'Source: Wikipedia.org'
        };
        var xAxis = {
            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        };
        var yAxis = {
            title: {
                text: 'Billions'
            },
            labels: {
                formatter: function() {
                    return this.value / 1000;
                }
            }
        };
        var tooltip = {
            shared: true,
            valueSuffix: ' millions'
        };
        var plotOptions = {
            area: {
                stacking: 'percent',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        };
        var credits = {
            enabled: false
        };
        var series = [{
            name: 'Asia',
            data: [502, 635, 809, 947, 1402, 3634, 5268]
        }, {
            name: 'Africa',
            data: [106, 107, 111, 133, 221, 767, 1766]
        }, {
            name: 'Europe',
            data: [163, 203, 276, 408, 547, 729, 628]
        }, {
            name: 'America',
            data: [18, 31, 54, 156, 339, 818, 1201]
        }, {
            name: 'Oceania',
            data: [2, 2, 2, 6, 13, 30, 46]
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.plotOptions = plotOptions;
        json.credits = credits;
        json.series = series;
        $('#container').highcharts(json);

    });
    </script>
</body>

</html>

میبینید که کدی بصورت زیر رو قرار دادیم:

var plotOptions = {
   area: {
       stacking: 'percent',
       lineColor: '#666666',
       lineWidth: 1,
       marker: {
           lineWidth: 1,
           lineColor: '#666666'
       }
   }
};

میبینید که فرقش با قبلی اینه که بجای normal از percent استفاده شده. خروجی بصورت زیر هست:percent stack

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

Ashkan Ashtiani

ممنون دوست عزیز… خیلی خوب توضیح دادین 😉

محمد اسفندیاری

خوشحالم که بدردتون خورده
موفق باشید