تخفیف ویژه

آموزش رسم نمودار با Highcharts (جلسه 29) - نمودار داینامیک و پویا - قسمت 1

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

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

نمونه اول : نمودار خطی spline با Update شدن در هر ثانیه

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

<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>
</head>

<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    <script language="JavaScript">
    $(document).ready(function() {
        var chart = {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in IE < IE 10.
            marginRight: 10,
            events: {
                load: function() {
                    // set up the updating of the chart each second
                    var series = this.series[0];
                    setInterval(function() {
                        var x = (new Date()).getTime(), // current time
                            y = Math.random();
                        series.addPoint([x, y], true, true);
                    }, 1000);
                }
            }
        };
        var title = {
            text: 'Live random data'
        };
        var xAxis = {
            type: 'datetime',
            tickPixelInterval: 150
        };
        var yAxis = {
            title: {
                text: 'Value'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        };
        var tooltip = {
            formatter: function() {
                return '<b>' + this.series.name + '</b><br/>' +
                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        };
        var plotOptions = {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        };
        var legend = {
            enabled: false
        };
        var exporting = {
            enabled: false
        };
        var series = [{
            name: 'Random data',
            data: (function() {
                // generate an array of random data
                var data = [],
                    time = (new Date()).getTime(),
                    i;
                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x: time + i * 1000,
                        y: Math.random()
                    });
                }
                return data;
            }())
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.legend = legend;
        json.exporting = exporting;
        json.series = series;
        json.plotOptions = plotOptions;


        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        $('#container').highcharts(json);

    });
    </script>
</body>

</html>

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

var chart = {
   type: 'spline',
   animation: Highcharts.svg, // don't animate in IE < IE 10.
   marginRight: 10,
   events: {
       load: function() {
           // set up the updating of the chart each second
           var series = this.series[0];
           setInterval(function() {
               var x = (new Date()).getTime(), // current time
                   y = Math.random();
               series.addPoint([x, y], true, true);
           }, 1000);
       }
   }
};

میبینید که در ابتدا نوع نمودار رو برابر با spline یا smooth line قرار دادیم و با اینکار خطوطی که نقاط رو به هم وصل میکنن، خط راست نیستن و انحنا دارن. با استفاده از ویژگی animation هم مشخص کردیم که زمانی که تغییری در نمودار ایجاد شد، با حالت انیمیشنی نمایش داده بشه. این انیمیشنها در مرورگرهای IE9 و قدیمی‌تر نمایش داده نمیشن. با استفاده از ویژگی marginRight هم فاصله از سمت راست رو برابر با 10 پیکسل قرار دادیم. درون ویژگی events محاسبات مورد نظر خودمون رو قرار میدیم و مشخص میکنیم که چند وقت یکبار آپدیت بشه و اینکه چه مقادیری برای عضو جدید باید در نظر گرفته بشه.  میبینید که در بالا یک setInterval قرار داده شده و هر 1000 میلی ثانیه یکبار اجرا میشه و یک عضو به series اضافه میکنه. هر عضوی که اضافه میشه آرایه ای از x و y هست. x رو همون زمان فعلی در نظر میگیریم و y هم با استفاده از متذ random یک مقدار تصادفی در نظر میگیریم.

متغیر series هم بصورت زیر هست:

var series = [{
   name: 'Random data',
   data: (function() {
       // generate an array of random data
       var data = [],
           time = (new Date()).getTime(),
           i;
       for (i = -19; i <= 0; i += 1) {
           data.push({
               x: time + i * 1000,
               y: Math.random()
           });
       }
       return data;
   }())
}];

میبینید که نام دسته رو برابر با Random data قرار دادیم و برای داده‌ها هم بصورت تصادفی اعدادی رو مشخص کردیم و در نمودار قرار دادیم. در آخر هم میبینید که چنین کدی قرار داده شده:

Highcharts.setOptions({
   global: {
       useUTC: false
   }
});

میبینید که ویژگی useUTC رو برابر با false قرار دادیم تا با این کار ساعت محلی خودمون نمایش داده بشه. اگه برابر با true باشه ساعت جهانی که چند ساعت با کشورمون اختلاف داره نمایش داده میشه. خروجی بصورت زیر خواهد بود:dynamic spline chart

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

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

یا علی

Source

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

جلسات دوره

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

علیرضا صیفی

چه طوری اطلاعات را از دیتابیس بخونم js زیاد بلد نیستم

نازنین کریمی مقدم

سلام. برای اتصال به دیتابیس راه های مختلفی وجود داره،
یکی از ابتدایی ترین کارها استفاده از کوئری هست. توصیه میکنم که پاسخ این سوال در سایت stackoverflow رو مطالعه کنید.

نیاز به لاگین

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