تخفیف ویژه

آموزش رسم نمودار با Highcharts (جلسه 19) - نمودارهای ستونی عمودی - قسمت 3

دسته بندی: جاوا اسکریپت
زمان مطالعه: 14 دقیقه
۰۹ خرداد ۱۳۹۵

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

نمونه پنجم : نمودار ستونی عمودی Stack و گروه بندی شده

با استفاده از این نمونه میتونین نمودارهایی رسم کنید که هم بصورت 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: 'column'
        };
        var title = {
            text: 'Total fruit consumption, grouped by gender'
        };
        var xAxis = {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        };
        var yAxis = {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        };
        var plotOptions = {
            column: {
                stacking: 'normal'
            }
        };
        var credits = {
            enabled: false
        };
        var series = [{
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'male'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
        }];

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

    });
    </script>
</body>

</html>

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

var plotOptions = {
   column: {
      stacking: 'normal',
      dataLabels: {
         enabled: true,
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
         style: {
            textShadow: '0 0 3px black'
         }
      }
   }
};

کدهایی که در داخل plotOption قرار میدید تنظیمات برای همه اطلاعات درون series رو مشخص میکنن. با استفاده از همون آرایه هایی که در series قرار میگیره میتونین یکی از این تنظیمات رو بازنویسی کنید و کاری کنید که یکی از اونا با بقیه متفاوت باشه. با استفاده از ویژگی stacking میتونیم کاری کنیم که داده‌ها در کنار هم و پشت سر هم قرار بگیرن و دید بهتری به کاربر بدن. برای این ویژگی سه مقدار null و percent و normal وجود داره که ما در بالا از normal استفاده کردیم.

var series = [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
    stack: 'male'
}, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5],
    stack: 'male'
}, {
    name: 'Jane',
    data: [2, 5, 6, 2, 1],
    stack: 'female'
}, {
    name: 'Janet',
    data: [3, 0, 4, 4, 3],
    stack: 'female'
}];

میبینید که درون series تعدادی عضو وجود داره و هر کدوم از اعضاء یک ویژگی بنام stack دارن. ما از این ویژگی برای دسته بندی و گروه بندی داده‌ها استفاده میکنیم. میبینید که دو تا از اعضاء رو برابر با male یا آقایان و دو مورد از اونا رو female یا بانوان قرار دادیم. با استفاده از این کار باعث میشیم که male‌ها بصورت جدا و female‌ها هم بصورت جدا گروه بندی شده و بصورت normal stack پشت سر هم قرار بگیرن. خروجی بصورت زیر میشه:Stacked group chart

نمونه ششم : چرخاندن عناوین و مقادیر نمودار ستونی

در این نمونه نمودار میخایم نحوه چرخاندن عناوین نوشته شده بر روی محور‌ها و همچنین مقادیری که برای هر نمودار نمایش داده میشه رو بهتون آموزش بدیم. کل کدها بصورت زیر هست:

<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: 'column'
        };
        var title = {
            text: 'World\'s largest cities per 2014'
        };
        var subtitle = {
            text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
        };
        var xAxis = {
            type: 'category',
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        };
        var yAxis = {
            min: 0,
            title: {
                text: 'Population (millions)'
            }
        };
        var tooltip = {
            pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
        };
        var credits = {
            enabled: false
        };
        var series = [{
            name: 'Population',
            data: [
                ['Shanghai', 23.7],
                ['Lagos', 16.1],
                ['Instanbul', 14.2],
                ['Karachi', 14.0],
                ['Mumbai', 12.5],
                ['Moscow', 12.1],
                ['Sao Paulo', 11.8],
                ['Beijing', 11.7],
                ['Guangzhou', 11.1],
                ['Delhi', 11.1],
                ['Shenzhen', 10.5],
                ['Seoul', 10.4],
                ['Jakarta', 10.0],
                ['Kinshasa', 9.3],
                ['Tianjin', 9.3],
                ['Tokyo', 9.0],
                ['Cairo', 8.9],
                ['Dhaka', 8.9],
                ['Mexico City', 8.9],
                ['Lima', 8.9]
            ],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y:.1f}', // one decimal
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }];

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

    });
    </script>
</body>

</html>

برای چرخاندن عناوینی که بر روی محور افقی قرار دارن بصورت زیر عمل میکنیم:

var xAxis = {
    type: 'category',
    labels: {
        rotation: -45,
        style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
        }
    }
};

میبینید که در ویژگی labels از متغیر xAxis تعدادی ویژگی قرار دادیم. با استفاده از rotation میتونین عناوین رو بچرخونید. میبینید که در کد بالا 45 درجه مشخص شده. با استفاده از fontSize و fontFamily هم میتونین سایز و نوع فونت رو مشخص کرده و نمایش بدین.

حالا برای چرخوندن مقادیر بر روی نمودار بصورت زیر عمل میکنیم:

var series = [{
    name: 'Population',
    data: [
        ['Shanghai', 23.7],
        ['Lagos', 16.1],
        ['Instanbul', 14.2],
        ['Karachi', 14.0],
        ['Mumbai', 12.5],
        ['Moscow', 12.1],
        ['Sao Paulo', 11.8],
        ['Beijing', 11.7],
        ['Guangzhou', 11.1],
        ['Delhi', 11.1],
        ['Shenzhen', 10.5],
        ['Seoul', 10.4],
        ['Jakarta', 10.0],
        ['Kinshasa', 9.3],
        ['Tianjin', 9.3],
        ['Tokyo', 9.0],
        ['Cairo', 8.9],
        ['Dhaka', 8.9],
        ['Mexico City', 8.9],
        ['Lima', 8.9]
    ],
    dataLabels: {
        enabled: true,
        rotation: -90,
        color: '#FFFFFF',
        align: 'right',
        format: '{point.y:.1f}', // one decimal
        y: 10, // 10 pixels down from the top
        style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
        }
    }
}];

میبینید که مثل همیشه اطلاعاتمون رو درون متغیر Series قرار دادیم و در اینجا یک ویژگی dataLabels به اون اضافه کردیم که خودش شامل تعدادی ویژگی دیگه هست که لیبلهای داده‌ها رو دستکاری میکنه. میبینید که در ابتدا اون رو فعال کردیم و بعد از اون 90 درجه چرخوندیمش و رنگ و ترازبندیش رو مشخص کردیم. سایز و نوع فونت اون رو مشخص کردیم و 10 پیکسل هم به سمت پایین آوردیمش. خروجی بصورت زیر میشه:rotated label chart

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

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

یا علی

Source

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

جلسات دوره

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

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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