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

‏ 9 دقیقه

۲۷ خرداد ۱۳۹۵

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

نمونه چهارم : نمودار دایره ای سه بعدی

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

<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: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        };
        var title = {
            text: 'Browser market shares at a specific website, 2014'
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };

        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        };
        var series = [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox', 45.0],
                ['IE', 26.8], {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari', 8.5],
                ['Opera', 6.2],
                ['Others', 0.7]
            ]
        }];

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

</html>

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

var chart = {
   type: 'pie',
   options3d: {
       enabled: true,
       alpha: 45,
       beta: 0
   }
};

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

var series = [{
   type: 'pie',
   name: 'Browser share',
   data: [
       ['Firefox', 45.0],
       ['IE', 26.8], {
           name: 'Chrome',
           y: 12.8,
           sliced: true,
           selected: true
       },
       ['Safari', 8.5],
       ['Opera', 6.2],
       ['Others', 0.7]
   ]
}];

میبینید که در ویژگی data همه داده‌های مورد نظر خودمون رو قرار دادیم و یکی از اونا رو selected کردیم. خروجی بصورت زیر خواهد بود:

نمونه پنجم : نمودار دایره ای سه بعدی بصورت Donut

در این نمونه میخایم یک نمونه نمودار رو در اختیارتون قرار بدیم که در اون نمودارمون بصورت دایره ای و Donut و سه بعدی نمایش داده شده. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:

<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: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        };
        var title = {
            text: 'Contents of Highsoft\'s weekly fruit delivery'
        };
        var subtitle = {
            text: '3D donut in Highcharts'
        };

        var plotOptions = {
            pie: {
                innerSize: 100,
                depth: 45
            }
        };
        var series = [{
            name: 'Delivered amount',
            data: [
                ['Bananas', 8],
                ['Kiwi', 3],
                ['Mixed nuts', 1],
                ['Oranges', 6],
                ['Apples', 8],
                ['Pears', 4],
                ['Clementines', 4],
                ['Reddish (bag)', 1],
                ['Grapes (bunch)', 1]
            ]
        }];

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

</html>

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

var chart = {
   type: 'pie',
   options3d: {
       enabled: true,
       alpha: 45
   }
};

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

var plotOptions = {
   pie: {
       innerSize: 100,
       depth: 45
   }
};

میبینید که درون ویژگی pie، ویژگی innerSize رو برابر با 100 قرار دادیم. با اینکار شعاع درونی رو برابر با 100 قرار دادیم و باعث میشه که شکل Donut به خودش بگیره. با استفاده از ویژگی depth هم عمق این نمودار رو مشخص کردیم. خروجی بصورت زیر هست: