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

‏  10 دقیقه
۲۶ خرداد ۱۳۹۵

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

نمونه دوم : نمودار ستونی با مقادیر null و صفر

در این نمونه میخایم یک نمونه نمودار ستونی رو در اختیارتون قرار بدیم که در بین داده‌های اون مقادیر null و 0 وجود داره و میخایم تفاوت اونا رو خدمتتون عرض کنیم. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:

<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>
    <script src="http://code.highcharts.com/highcharts-3d.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',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 10,
                beta: 25,
                depth: 70
            }
        };
        var title = {
            text: '3D chart with null values'
        };
        var subtitle = {
            text: 'Notice the difference between a 0 value and a null point'
        };
        var xAxis = {
            categories: Highcharts.getOptions().lang.shortMonths
        };
        var yAxis = {
            title: {
                text: null
            }
        };
        var series = [{
            name: 'Sales',
            data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.series = series;
        $('#container').highcharts(json);
    });
    </script>
</body>

</html>

در ابتدا کدی بصورت زیر قرار داده شده است:

var chart = {
   type: 'column',
   margin: 75,
   options3d: {
       enabled: true,
       alpha: 10,
       beta: 25,
       depth: 70
   }
};

میبینید که با استفاده از کد بالا نوع نمودار رو برابر با ستونی در نظر گرفتیم و عمق و زوایای چرخش رو نیز مشخص کردیم. داده هایی که در متغیر Series وارد شده اند بصورت زیر هست:

var series = [{
   name: 'Sales',
   data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
}];

میبینید که در لابلای این اعداد، مقادیر null و 0 هم وجود داره. خروجی بصورت زیر هست:column null 3d chart

میبینید که اون مقداری که null هست هیچ ستونی در اونجا قرار نداره ولی اون مقداری که برابر با 0 هست، یک ستون وجود داره، اما مقدار اون برابر با صفر هست و هیچ ارتفاعی نداره و شبیه به یک صفحه دوبعدی هست.

نمونه سوم : نمودار ستونی بصورت گروه بندی و stack شده

در این نمونه میخایم یک نمونه نمودار ستونی رو در اختیارتون قرار بدیم که داده‌های اون بصورت گروه بندی و 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>
    <script src="http://code.highcharts.com/highcharts-3d.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',
            marginTop: 80,
            marginRight: 40,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                viewDistance: 25,
                depth: 40
            }
        };
        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 tooltip = {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
        };

        var plotOptions = {
            column: {
                stacking: 'normal',
                depth: 40
            }
        };
        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.tooltip = tooltip;
        json.plotOptions = plotOptions;
        json.series = series;
        $('#container').highcharts(json);
    });
    </script>
</body>

</html>

در ابتدا کدی بصورت زیر قرار داده شده است:

var chart = {
   type: 'column',
   marginTop: 80,
   marginRight: 40,
   options3d: {
       enabled: true,
       alpha: 15,
       beta: 15,
       viewDistance: 25,
       depth: 40
   }
};

نوع نمودار رو ستونی کردیم و فاصله از بالا و راست رو به ترتیب برابر با 80 و 40 قرار دادیم. حالت سه بعدی رو فعال کردیم و عمق و فاصله ناظر رو هم مشخص کردیم. متغیر plotOption که نقش اصلی در این نمونه رو داره بصورت زیر هست:

var plotOptions = {
   column: {
       stacking: 'normal',
       depth: 40
   }
};
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'
}];

میبینید که در ابتدا stacking رو برابر با normal قرار دادیم و عمق ستونها رو برابر با 40 در نظر گرفتیم. میبینید که متغیر Series چهار عضو داره که درون هر کدوم از اونا اطلاعات مرتبط به همون اومده و یک ویژگی بنام stack هم وجود داره که با استفاده از اون اومده و این دسته‌ها رو گروه بندی کرده. در بالا دو گروه male و female وجود داره. خروجی بصورت زیر خواهد بود:3d stacking column

 

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

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

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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