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

‏  16 دقیقه
۰۳ تیر ۱۳۹۵

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

نمونه پنجم : نمودار زاویه ای بشکل VU Meter

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

<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: 'gauge',
            plotBorderWidth: 1,
            plotBackgroundColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, '#FFF4C6'],
                    [0.3, '#FFFFFF'],
                    [1, '#FFF4C6']
                ]
            },
            plotBackgroundImage: null,
            height: 200
        };
        var credits = {
            enabled: false
        };

        var title = {
            text: 'VU meter'
        };

        var pane = [{
            startAngle: -45,
            endAngle: 45,
            background: null,
            center: ['25%', '145%'],
            size: 300
        }, {
            startAngle: -45,
            endAngle: 45,
            background: null,
            center: ['75%', '145%'],
            size: 300
        }];

        var yAxis = [{
            min: -20,
            max: 6,
            minorTickPosition: 'outside',
            tickPosition: 'outside',
            labels: {
                rotation: 'auto',
                distance: 20
            },
            plotBands: [{
                from: 0,
                to: 6,
                color: '#C02316',
                innerRadius: '100%',
                outerRadius: '105%'
            }],
            pane: 0,
            title: {
                text: 'VU<br/><span style="font-size:8px">Channel A</span>',
                y: -40
            }
        }, {
            min: -20,
            max: 6,
            minorTickPosition: 'outside',
            tickPosition: 'outside',
            labels: {
                rotation: 'auto',
                distance: 20
            },
            plotBands: [{
                from: 0,
                to: 6,
                color: '#C02316',
                innerRadius: '100%',
                outerRadius: '105%'
            }],
            pane: 1,
            title: {
                text: 'VU<br/><span style="font-size:8px">Channel B</span>',
                y: -40
            }
        }];

        var plotOptions = {
            gauge: {
                dataLabels: {
                    enabled: false
                },
                dial: {
                    radius: '100%'
                }
            }
        };
        var series = [{
            data: [-20],
            yAxis: 0
        }, {
            data: [-20],
            yAxis: 1
        }];

        var json = {};
        json.chart = chart;
        json.credits = credits;
        json.title = title;
        json.pane = pane;
        json.yAxis = yAxis;
        json.plotOptions = plotOptions;
        json.series = series;

        // Add some life
        var chartFunction = function(chart) {
            setInterval(function() {
                if (chart.series) { // the chart may be destroyed
                    var left = chart.series[0].points[0],
                        right = chart.series[1].points[0],
                        leftVal,
                        rightVal,
                        inc = (Math.random() - 0.5) * 3;

                    leftVal = left.y + inc;
                    rightVal = leftVal + inc / 3;
                    if (leftVal < -20 || leftVal > 6) {
                        leftVal = left.y - inc;
                    }
                    if (rightVal < -20 || rightVal > 6) {
                        rightVal = leftVal;
                    }

                    left.update(leftVal, false);
                    right.update(rightVal, false);
                    chart.redraw();
                }
            }, 500);
        };

        $('#container').highcharts(json, chartFunction);
    });
    </script>
</body>

</html>

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

var chart = {
   type: 'gauge',
   plotBorderWidth: 1,
   plotBackgroundColor: {
       linearGradient: {
           x1: 0,
           y1: 0,
           x2: 0,
           y2: 1
       },
       stops: [
           [0, '#FFF4C6'],
           [0.3, '#FFFFFF'],
           [1, '#FFF4C6']
       ]
   },
   plotBackgroundImage: null,
   height: 200
};

با استفاده از این کد، نوع نمودار رو بصورت اندازه گیر یا guage قرار دادیم و برای پس زمینه یک گرادیان قرار دادیم و stops‌ها رو مشخص کردیم. ضخامت border رو برابر با 1 پیکسل در نظر گرفتیم و ارتفاع رو هم 200 پیکسل قرار دادیم.

var pane = [{
   startAngle: -45,
   endAngle: 45,
   background: null,
   center: ['25%', '145%'],
   size: 300
}, {
   startAngle: -45,
   endAngle: 45,
   background: null,
   center: ['75%', '145%'],
   size: 300
}];

با استفاده از کد بالا میایم مشخص میکنیم که دو تا نمودار میخایم داشته باشیم و با استفاده از pane پس زمینه و برد نمودار رو مشخص میکنیم. همونطور که میبینید از زاویه 45- تا 45 برای هر دو نمودار قرار داده شده و بنابراین زاویه 90 درجه رو میسازه. محل قرار گیری مراکز دایره‌ها نیز با استفاده از ویژگی center مشخص شده و size اونا رو هم قرار دادیم.

var yAxis = [{
   min: -20,
   max: 6,
   minorTickPosition: 'outside',
   tickPosition: 'outside',
   labels: {
       rotation: 'auto',
       distance: 20
   },
   plotBands: [{
       from: 0,
       to: 6,
       color: '#C02316',
       innerRadius: '100%',
       outerRadius: '105%'
   }],
   pane: 0,
   title: {
       text: 'VU<br/><span style="font-size:8px">Channel A</span>',
       y: -40
   }
}, {
   min: -20,
   max: 6,
   minorTickPosition: 'outside',
   tickPosition: 'outside',
   labels: {
       rotation: 'auto',
       distance: 20
   },
   plotBands: [{
       from: 0,
       to: 6,
       color: '#C02316',
       innerRadius: '100%',
       outerRadius: '105%'
   }],
   pane: 1,
   title: {
       text: 'VU<br/><span style="font-size:8px">Channel B</span>',
       y: -40
   }
}];

میبینید که برای هر دو نمودار تقریبا تنظیمات مشابهی رو قرار دادیم. حداقل و حداکثر رو به ترتیب برابر با 20- و 6 قرار دادیم. بعد از اون لیبل‌ها و تیکها رو مشخص کردیم و بهشون استایل دادیم و گفتیم که برای مقدار 0 تا 6 استایل متفاوتی داشته باشه و قرمز رنگ و ضخیمتر نمایش داده میشه.

var series = [{
   data: [-20],
   yAxis: 0
}, {
   data: [-20],
   yAxis: 1
}];

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

var chartFunction = function(chart) {
   setInterval(function() {
       if (chart.series) { // the chart may be destroyed
           var left = chart.series[0].points[0],
               right = chart.series[1].points[0],
               leftVal,
               rightVal,
               inc = (Math.random() - 0.5) * 3;

           leftVal = left.y + inc;
           rightVal = leftVal + inc / 3;
           if (leftVal < -20 || leftVal > 6) {
               leftVal = left.y - inc;
           }
           if (rightVal < -20 || rightVal > 6) {
               rightVal = leftVal;
           }

           left.update(leftVal, false);
           right.update(rightVal, false);
           chart.redraw();
       }
   }, 500);
};

با استفاده از کد بالا یک setInterval قرار دادیم که هر 0.5 ثانیه یکبار یک سری کد اجرا شه و نمودار بروزرسانی بشه و نمودار طبیعی‌تر جلوه بده. در هر بار اجرای این کدها یک متغیر تصادفی قرار داده میشه و عقربه نمودار جابجا میشه. در آخر هم کد زیر رو میزاریم و این تابع رو برای نمودار قرار میدیم و اضافه میکنیم:

$('#container').highcharts(json, chartFunction);

خروجی بصورت زیر هست:guage vumeter highcharts

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

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

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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