تخفیف ویژه

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

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

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

<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    <script language="JavaScript">
    $(document).ready(function() {
        var chart = {
            type: 'scatter',
            margin: [70, 50, 60, 80],
            events: {
                click: function(e) {
                    // find the clicked values and the series
                    var x = e.xAxis[0].value,
                        y = e.yAxis[0].value,
                        series = this.series[0];
                    // Add it
                    series.addPoint([x, y]);
                }
            }
        };
        var title = {
            text: 'User supplied data'
        };
        var subtitle = {
            text: 'Click the plot area to add a point. Click a point to remove it.'
        };
        var xAxis = {
            gridLineWidth: 1,
            minPadding: 0.2,
            maxPadding: 0.2,
            maxZoom: 60
        };
        var yAxis = {
            title: {
                text: 'Value'
            },
            minPadding: 0.2,
            maxPadding: 0.2,
            maxZoom: 60,
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        };
        var legend = {
            enabled: false
        };
        var exporting = {
            enabled: false
        };
        var plotOptions = {
            series: {
                lineWidth: 1,
                point: {
                    events: {
                        'click': function() {
                            if (this.series.data.length > 1) {
                                this.remove();
                            }
                        }
                    }
                }
            }
        };

        var series = [{
            data: [
                [20, 20],
                [80, 80]
            ]
        }];

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

    });
    </script>
</body>

</html>

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

var chart = {
   type: 'scatter',
   margin: [70, 50, 60, 80],
   events: {
       click: function(e) {
           // find the clicked values and the series
           var x = e.xAxis[0].value,
               y = e.yAxis[0].value,
               series = this.series[0];
           // Add it
           series.addPoint([x, y]);
       }
   }
};

میبینید که درون متغیر Chart ویژگی‌های مورد نظر رو قرار دادیم. با استفاده از ویژگی type نوع نمودار رو برابر با scatter یا پراکندگی قرار دادیم. با استفاده از ویژگی margin هم فاصله نمودار از اطراف رو مشخص کردیم. درون ویژگی events هم همانند نمونه قبل از رویداد مورد نظرمون استفاده میکنیم. میبینید که در اینجا از رویداد کلیک استفاده کردیم . یک تابع در مقابل اون قرار دادیم و با کلیک بر روی هر نقطه این نمودار، این تابع و کدهای مربوط به اون اجرا میشن. در ابتدا سه متغیر رو تعریف کردیم. متغیر x همون موقعیت افقی نقطه کلیک شده هست و با استفاده از روش بالا بدست میاد. متغیر y موقعیت عمودی نقطه کلیک شده هست. متغیر series هم، همون متغیر Series نمودار هست که داده‌ها رو در خودش ذخیره میکنه و در نمودار نمایش میده. در نهایت هم با استفاده از متد addPoint اون نقطه رو به متغیر series اضافه میکنیم. متغیر Series در ابتدا بصورت زیر هست:

var series = [{
   data: [
       [20, 20],
       [80, 80]
   ]
}];

میبینید که در ابتدا دو نقطه بیشتر نداره و ما با هر کلیک یک نقطه به اون اضافه میکنیم.

var plotOptions = {
   series: {
       lineWidth: 1,
       point: {
           events: {
               'click': function() {
                   if (this.series.data.length > 1) {
                       this.remove();
                   }
               }
           }
       }
   }
};

با استفاده از متغیر plotOption و ویژگی point موجود در اون اومدیم و گفتیم که زمانی که بر روی نقاط موجود کلیک شد، اون نقطه که بر روش کلیک شده رو حذف کن. خروجی بصورت زیر میشه:chart dynamic click

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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