تخفیف ویژه

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

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

در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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() {

        /**
         * Get the current time
         */
        function getNow() {
            var now = new Date();
            return {
                hours: now.getHours() + now.getMinutes() / 60,
                minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
                seconds: now.getSeconds() * 12 / 60
            };
        }

        /**
         * Pad numbers
         */
        function pad(number, length) {
            // Create an array of the remaining length + 1 and join it with 0's
            return new Array((length || 2) + 1 - String(number).length).join(0) + number;
        }

        var now = getNow();


        var chart = {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false,
            height: 200
        };
        var credits = {
            enabled: false
        };

        var title = {
            text: 'The Highcharts clock'
        };

        var pane = {
            background: [{
                // default background
            }, {
                // reflex for supported browsers
                backgroundColor: Highcharts.svg ? {
                    radialGradient: {
                        cx: 0.5,
                        cy: -0.4,
                        r: 1.9
                    },
                    stops: [
                        [0.5, 'rgba(255, 255, 255, 0.2)'],
                        [0.5, 'rgba(200, 200, 200, 0.2)']
                    ]
                } : null
            }]
        };

        // the value axis
        var yAxis = {
            labels: {
                distance: -20
            },
            min: 0,
            max: 12,
            lineWidth: 0,
            showFirstLabel: false,
            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 5,
            minorTickPosition: 'inside',
            minorGridLineWidth: 0,
            minorTickColor: '#666',

            tickInterval: 1,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#666',
            title: {
                text: 'Powered by<br/>Highcharts',
                style: {
                    color: '#BBB',
                    fontWeight: 'normal',
                    fontSize: '8px',
                    lineHeight: '10px'
                },
                y: 10
            }
        };

        var tooltip = {
            formatter: function() {
                return this.series.chart.tooltipText;
            }
        };
        var series = [{
            data: [{
                id: 'hour',
                y: now.hours,
                dial: {
                    radius: '60%',
                    baseWidth: 4,
                    baseLength: '95%',
                    rearLength: 0
                }
            }, {
                id: 'minute',
                y: now.minutes,
                dial: {
                    baseLength: '95%',
                    rearLength: 0
                }
            }, {
                id: 'second',
                y: now.seconds,
                dial: {
                    radius: '100%',
                    baseWidth: 1,
                    rearLength: '20%'
                }
            }],
            animation: false,
            dataLabels: {
                enabled: false
            }
        }];

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

        // Add some life
        var chartFunction = function(chart) {
            setInterval(function() {
                now = getNow();

                var hour = chart.get('hour'),
                    minute = chart.get('minute'),
                    second = chart.get('second'),
                    // run animation unless we're wrapping around from 59 to 0
                    animation = now.seconds === 0 ? false : {
                        easing: 'easeOutElastic'
                    };

                // Cache the tooltip text
                chart.tooltipText = pad(Math.floor(now.hours), 2) + ':' +
                    pad(Math.floor(now.minutes * 5), 2) + ':' +
                    pad(now.seconds * 5, 2);

                hour.update(now.hours, true, animation);
                minute.update(now.minutes, true, animation);
                second.update(now.seconds, true, animation);
            }, 1000);
        };
    });

    // Extend jQuery with some easing (copied from jQuery UI)
    $.extend($.easing, {
        easeOutElastic: function(x, t, b, c, d) {
            var s = 1.70158;
            var p = 0;
            var a = c;
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (!p) p = d * .3;
            if (a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
        }
    });
    </script>
</body>

</html>

همونطور که میبینید در این نمونه علاوه بر فایل اصلی highcharts، فایل hightchart-more رو هم وارد کردیم که قابلیتهای بیشتری رو به قابلیتهای قبلی اضافه میکنه.

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

function getNow() {
   var now = new Date();
   return {
       hours: now.getHours() + now.getMinutes() / 60,
       minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
       seconds: now.getSeconds() * 12 / 60
   };
}

این مورد یک تابع هست که در هر بار اجرا و فراخوانی، تاریخ فعلی و کنونی رو دریافت میکنه و ساعت، دقیقه و ثانیه اون رو بصورت مرتب و یک object بر میگردونه.

var chart = {
   type: 'gauge',
   plotBackgroundColor: null,
   plotBackgroundImage: null,
   plotBorderWidth: 0,
   plotShadow: false,
   height: 200
};

میبینید که نوع نمودار رو برابر با gauge یا زاویه ای قرار دادیم و سایه، حاضیه و رنگ رو برای اون قرار ندادیم و ارتفاع نمودار یا ساعت رو برابر با 200 در نظر گرفتیم.

var pane = {
   background: [{
       // default background
   }, {
       // reflex for supported browsers
       backgroundColor: Highcharts.svg ? {
           radialGradient: {
               cx: 0.5,
               cy: -0.4,
               r: 1.9
           },
           stops: [
               [0.5, 'rgba(255, 255, 255, 0.2)'],
               [0.5, 'rgba(200, 200, 200, 0.2)']
           ]
       } : null
   }]
};

بعد از اون با استفاده از متغیر pane پس زمینه ساعت و رنگ اون رو مشخص کردیم. همونطور که میبینید background اون رو بصورت پیش فرض قرار دادیم و همچنین برای اون یک Gradient قرار دادیم که شعاع اون 1.9 هست و موقعیت مرکز دایره هم با استفاده از cx و cy مشخص شده. رنگهایی هم که گرادیان به اونا ختم میشه در ویژگی stops قرار داده شده. با استفاده از این گرادیان یک حالت reflex یا بازتاب زیبا روی ساعت میوفته و مرورگرهایی که گرادیان رو پشتیبانی میکنن اون رو نمایش میدن.

var yAxis = {
   labels: {
       distance: -20
   },
   min: 0,
   max: 12,
   lineWidth: 0,
   showFirstLabel: false,
   minorTickInterval: 'auto',
   minorTickWidth: 1,
   minorTickLength: 5,
   minorTickPosition: 'inside',
   minorGridLineWidth: 0,
   minorTickColor: '#666',

   tickInterval: 1,
   tickWidth: 2,
   tickPosition: 'inside',
   tickLength: 10,
   tickColor: '#666',
   title: {
       text: 'Powered by<br/>Highcharts',
       style: {
           color: '#BBB',
           fontWeight: 'normal',
           fontSize: '8px',
           lineHeight: '10px'
       },
       y: 10
   }
};

با استفاده از متغیر yAxis هم محور ساعت رو مشخص کردیم و عددها بر روی این محور نمایش داده میشن. حداقل و حداکثر مقدار رو برابر با همون 0 و 12 قرار دادیم که نمایانگر ساعت هست. با استفاده از ویژگی‌های دیگه هم ضخامت و رنگ عقربه و تیک‌ها رو مشخص میکنیم و در آخر هم با استفاده از ویژگی title، عنوان ساعت و استایل مورد نظر رو برای اون قرار دادیم.

var series = [{
   data: [{
       id: 'hour',
       y: now.hours,
       dial: {
           radius: '60%',
           baseWidth: 4,
           baseLength: '95%',
           rearLength: 0
       }
   }, {
       id: 'minute',
       y: now.minutes,
       dial: {
           baseLength: '95%',
           rearLength: 0
       }
   }, {
       id: 'second',
       y: now.seconds,
       dial: {
           radius: '100%',
           baseWidth: 1,
           rearLength: '20%'
       }
   }],
   animation: false,
   dataLabels: {
       enabled: false
   }
}];

با استفاده از متغیر series داده هامون که همون اعداد ساعت و دقیقه و ثانیه هستن رو قرار دادیم و به نمودار معرفی کردیم. میبینید که سه دسته hour و minute و second اضافه شده و درون هر کدوم از اونا یک ویژگی dial قرار داده شده که با استفاده از اون شعاع و طول و ضخامت داده‌ها رو مشخص میکنه.

var chartFunction = function(chart) {
   setInterval(function() {
       now = getNow();

       var hour = chart.get('hour'),
           minute = chart.get('minute'),
           second = chart.get('second'),
           // run animation unless we're wrapping around from 59 to 0
           animation = now.seconds === 0 ? false : {
               easing: 'easeOutElastic'
           };

       // Cache the tooltip text
       chart.tooltipText = pad(Math.floor(now.hours), 2) + ':' +
           pad(Math.floor(now.minutes * 5), 2) + ':' +
           pad(now.seconds * 5, 2);

       hour.update(now.hours, true, animation);
       minute.update(now.minutes, true, animation);
       second.update(now.seconds, true, animation);
   }, 1000);
};
});

در آخر هم یک setInterval قرار دادیم و هر 1 ثانیه یکبار اجرا میشه و تعدادی کار رو انجام میده و ساعتمون رو ره میندازه تا طبیعی به نظر برسه. در هر بار اجرا موقعیت قرار گیری عقربه‌های ساعت، دقیقه و ثانیه شمار بروزرسانی میشه. خروجی بصورت زیر هست:guage clock chart

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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