تخفیف ویژه

آموزش رسم نمودار با Highcharts (جلسه 13) - نمودارهای سطحی - قسمت 4

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

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

نمونه هفتم : نمودار سطحی بصورت Spline

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

<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: 'areaspline'
        };
        var title = {
            text: 'Average fruit consumption during one week'
        };
        var subtitle = {
            style: {
                position: 'absolute',
                right: '0px',
                bottom: '10px'
            }
        };
        var legend = {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 150,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        };
        var xAxis = {
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
        };
        var yAxis = {
            title: {
                text: 'Fruit units'
            }
        };
        var tooltip = {
            shared: true,
            valueSuffix: ' units'
        };
        var credits = {
            enabled: false
        }
        var plotOptions = {
            areaspline: {
                fillOpacity: 0.5
            }
        };
        var series = [{
            name: 'John',
            data: [3, 4, 3, 5, 4, 10, 12]
        }, {
            name: 'Jane',
            data: [1, 3, 4, 3, 3, 5, 4]
        }];

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

    });
    </script>
</body>

</html>

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

var chart = {
    type: 'areaspline'
};

میبینید که نوع یا type رو برابر با areasplie قرار دادیم. با اینکار نمودار سطحی بصورت spline رسم میشه  و خروجی اون بصورت زیر خواهد بود:spline area chart

میبینید که خطوط بصورت Smooth یا نرم کشیده شده اند.

نمونه هشتم : نمودار سطحی با بازه داده یا range

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

<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/modules/data.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: 'arearange',
            zoomType: 'x'
        };
        var title = {
            text: 'Temperature variation by day'
        };
        var xAxis = {
            type: 'datetime'
        };
        var yAxis = {
            title: {
                text: null
            }
        };
        var tooltip = {
            shared: true,
            crosshairs: true,
            valueSuffix: '\xB0C'
        };
        var legend = {
            enabled: false
        }

        var json = {};
        json.chart = chart;
        json.title = title;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.legend = legend;

        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
            var series = [{
                name: 'Temperatures',
                data: data
            }];
            json.series = series;
            $('#container').highcharts(json);
        });
    });
    </script>
</body>

</html>

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

var chart = {
    type: 'arearange',
    zoomType: 'x'
};

میبینید که در ابتدا نوع این نمودار arearange قرار داده شده و مشخص میکنه که میخام از نمودار بازه ای استفاده کنیم. بعد از اون همونطور که در جلسات قبل توضیح داده شد در اینجا مقدار ویژگی zoomType رو برابر با x قرار داده و با اینکار میتونین این نمودار رو در جهت محور x بزرگنمایی و زوم کنید. داده‌ها رو از یک فایل JSON که در سرور دیگری قرار داده شده با استفاده از Ajax لود میکنیم و از اطلاعات موجود در اون در نمودار استفاده میکنیم. بصورت زیر:

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {
    var series = [{
        name: 'Temperatures',
        data: data
    }];
    json.series = series;
    $('#container').highcharts(json);
});

این نمونه رو هم در قسمتهای قبل توضیح دادیم و چیز خاصی نداره. خروجی این نمودار بصورت زیر خواهد بود:Area range chart

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

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

یا علی

Source

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

جلسات دوره

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

هدیه تبلیغاتی

ی دنیا ممنون و متشکر
خوشحالم ک تونستم جواب سوالمو اینجا پیدا کنم

محمد اسفندیاری

موفق باشید
منم خوشحالم که بدردتون خورده
موفق باشید

Syd Ali Bararsani

با سلام و تشکر بابت این سری آموزش گاربردی…
آموزش خواندن نمودار هار از داده های دیتابیس هم دارید؟

محمد اسفندیاری

سلام
همونطور که دیدید در این آموزش با استفاده از Ajax و متد getJSON یک فایل json رو گرفتیم و اطلاعات اون رو در نمودار نمایش دادیم
همینکارو برای دیتابیس هم میشه کرد و اطلاعات برگشتی از سرور رو در نمودار نمایش داد
در آدرس زیر همچین کاری رو انجام داده و میتونین از اون استفاده کنید
http://www.highcharts.com/docs/working-with-data/data-from-a-database
موفق باشید

شرکت طراحی

ممنون از سایت خوبتون

محمد اسفندیاری

موفق باشید

نیاز به لاگین

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