تخفیف ویژه

آموزش رسم نمودار با Highcharts (جلسه 28) - نمودارهای حبابی یا Bubble

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

در این جلسه با ادامه موضوع مربوط به رسم نمودار با Highcharts در خدمتتون هستم. 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-more.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: 'bubble',
            zoomType: 'xy'
        };
        var title = {
            text: 'Highcharts Bubbles'
        };
        var series = [{
            data: [
                [97, 36, 79],
                [94, 74, 60],
                [68, 76, 58],
                [64, 87, 56],
                [68, 27, 73],
                [74, 99, 42],
                [7, 93, 87],
                [51, 69, 40],
                [38, 23, 33],
                [57, 86, 31]
            ]
        }, {
            data: [
                [25, 10, 87],
                [2, 75, 59],
                [11, 54, 8],
                [86, 55, 93],
                [5, 3, 58],
                [90, 63, 44],
                [91, 33, 17],
                [97, 3, 56],
                [15, 67, 48],
                [54, 25, 81]
            ]
        }, {
            data: [
                [47, 47, 21],
                [20, 12, 4],
                [6, 76, 91],
                [38, 30, 60],
                [57, 98, 64],
                [61, 17, 80],
                [83, 60, 13],
                [67, 78, 75],
                [64, 12, 10],
                [30, 77, 82]
            ]
        }];

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

    });
    </script>
</body>

</html>

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

var chart = {
   type: 'bubble',
   zoomType: 'xy'
};

میبینید که نوع نمودار رو برابر با bubble قرار دادیم و با این کار داده‌ها بصورت حبابی نمایش داده میشن. با استفاده از ویژگی zoomType هم برای نمودار قابلیت بزرگنمایی در جهتهای افقی و عمودی رو قرار دادیم.

var series = [{
   data: [
       [97, 36, 79],
       [94, 74, 60],
       [68, 76, 58],
       [64, 87, 56],
       [68, 27, 73],
       [74, 99, 42],
       [7, 93, 87],
       [51, 69, 40],
       [38, 23, 33],
       [57, 86, 31]
   ]
}, {
   data: [
       [25, 10, 87],
       [2, 75, 59],
       [11, 54, 8],
       [86, 55, 93],
       [5, 3, 58],
       [90, 63, 44],
       [91, 33, 17],
       [97, 3, 56],
       [15, 67, 48],
       [54, 25, 81]
   ]
}, {
   data: [
       [47, 47, 21],
       [20, 12, 4],
       [6, 76, 91],
       [38, 30, 60],
       [57, 98, 64],
       [61, 17, 80],
       [83, 60, 13],
       [67, 78, 75],
       [64, 12, 10],
       [30, 77, 82]
   ]
}];

میبینید درون متغیر Series هم داده‌های مورد نظرمون رو قرار دادیم و در سه دسته کلی جا گرفتن. هر کدوم از اونا سه مقدار داره، که مقدار اول اون محل افقی و مقدار دوم محل عمودی و مقدار سوم نیز شعاع اون رو مشخص میکنه. خروجی بصورت زیر میشه:bubble basic 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>
    <script src="http://code.highcharts.com/highcharts-more.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: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        };
        var title = {
            text: 'Highcharts bubbles with radial gradient fill'
        };
        var xAxis = {
            gridLineWidth: 1
        };

        var yAxis = {
            startOnTick: false,
            endOnTick: false
        };

        var series = [{
            data: [
                [9, 81, 63],
                [98, 5, 89],
                [51, 50, 73],
                [41, 22, 14],
                [58, 24, 20],
                [78, 37, 34],
                [55, 56, 53],
                [18, 45, 70],
                [42, 44, 28],
                [3, 52, 59],
                [31, 18, 97],
                [79, 91, 63],
                [93, 23, 23],
                [44, 83, 22]
            ],
            marker: {
                fillColor: {
                    radialGradient: {
                        cx: 0.4,
                        cy: 0.3,
                        r: 0.7
                    },
                    stops: [
                        [0, 'rgba(255,255,255,0.5)'],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
                    ]
                }
            }
        }, {
            data: [
                [42, 38, 20],
                [6, 18, 1],
                [1, 93, 55],
                [57, 2, 90],
                [80, 76, 22],
                [11, 74, 96],
                [88, 56, 10],
                [30, 47, 49],
                [57, 62, 98],
                [4, 16, 16],
                [46, 10, 11],
                [22, 87, 89],
                [57, 91, 82],
                [45, 15, 98]
            ],
            marker: {
                fillColor: {
                    radialGradient: {
                        cx: 0.4,
                        cy: 0.3,
                        r: 0.7
                    },
                    stops: [
                        [0, 'rgba(255,255,255,0.5)'],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
                    ]
                }
            }
        }];

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

    });
    </script>
</body>

</html>

تفاوتی که با نمونه قبل داره اینه که درون متغیر Series، ویژگی marker رو دستکاری کرده و برای رنگ پس زمینه اون یک گرادیان شعاعی قرار داده. بصورت زیر:

marker: {
    fillColor: {
        radialGradient: {
            cx: 0.4,
            cy: 0.3,
            r: 0.7
        },
        stops: [
            [0, 'rgba(255,255,255,0.5)'],
            [1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
        ]
    }
}

میبینید که برای هر دسته یک گرادیان قرار داده شده و طول، عرض و شعاع گرادیان رو مشخص کرده. خروجی بصورت زیر خواهد بود:bubble 3d chart

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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