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

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

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

نمونه پنجم : نمودار spline با محورهای معکوس

در این جلسه یک نمودار 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: 'spline',
            inverted: true
        };
        var title = {
            text: 'Atmosphere Temperature by Altitude'
        };
        var subtitle = {
            text: 'According to the Standard Atmosphere Model'
        };
        var xAxis = {
            reversed: false,
            title: {
                enabled: true,
                text: 'Altitude'
            },
            labels: {
                formatter: function() {
                    return this.value + 'km';
                }
            },
            maxPadding: 0.05,
            showLastLabel: true
        };
        var yAxis = {
            title: {
                text: 'Temperature'
            },
            labels: {
                formatter: function() {
                    return this.value + '\xB0';
                }
            },
            lineWidth: 2
        };
        var legend = {
            enabled: false
        };
        var tooltip = {
            headerFormat: '<b>{series.name}</b><br/>',
            pointFormat: '{point.x} km: {point.y}\xB0C'
        };
        var plotOptions = {
            spline: {
                marker: {
                    enable: false
                }
            }
        };
        var series = [{
            name: 'Temperature',
            data: [
                [0, 15],
                [10, -50],
                [20, -56.5],
                [30, -46.5],
                [40, -22.1],
                [50, -2.5],
                [60, -27.7],
                [70, -55.7],
                [80, -76.5]
            ]
        }];


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

    });
    </script>
</body>

</html>

همونطور که دیدید در ابتدا متغیر chart بصورت زیر تعریف شده:

var chart = {
   type: 'spline',
   inverted: true
};

میبینید که با استفاده از ویژگی type نوع نمودار رو برابر با spline قرار دادیم. با استفاده از این کار خطوطی که نقاط نمودار رو به هم وصل میکنن صاف نیستن و بصورت خمیده و نرم کشیده میشن تا شکلی انحنادار به خود بگیرن. با استفاده از True قرار دادن ویژگی inverted باعث میشید که محور x عمودی و محور y افقی نمایش داده بشه و نمودارها برعکس بشن. بقیه کدها باید براتون آشنا باشه و دیگه نیازی به توضیح ندارن و خودتون میتونین با استفاده از تغییر اونا بفهمید که هر کدوم مربوط به چه چیزی هستند و بر روی چه چیزی تاثیر میزارن.

خروجی بصورت زیر هست:spline inverted

نمونه ششم : نمودار spline با symbol و نشانهای مختلف

در اینجا یک نمودار spline با symbol‌ها مختلف رو در اختیارتون میزارم و یاد میگیرید که چطور آیکونها و اشکال مختلف رو در نقاط مختلف نمودار قرار بدین. کدهای این نمودار:

<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'
        };
        var title = {
            text: 'Monthly Average Temperature'
        };
        var subtitle = {
            text: 'Source: WorldClimate.com'
        };
        var xAxis = {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
            ]
        };
        var yAxis = {
            title: {
                text: 'Temperature'
            },
            labels: {
                formatter: function() {
                    return this.value + '\xB0';
                }
            },
            lineWidth: 2
        };
        var tooltip = {
            crosshairs: true,
            shared: true
        };
        var plotOptions = {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        };
        var series = [{
            name: 'Tokyo',
            marker: {
                symbol: 'square'
            },
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
                y: 26.5,
                marker: {
                    symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
                }
            }, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'London',
            marker: {
                symbol: 'diamond'
            },
            data: [{
                y: 3.9,
                marker: {
                    symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
                }
            }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }];

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

    });
    </script>
</body>

</html>

همونطور که دیدید در ابتدا متغیر chart تعریف شده و نوع نمودار برابر با spline قرار گرفته. بعد از اون عنوان اصلی و عنوان فرعی نمودار مشخص شده.  در ادامه اون تنظیمات مربوط به محورهای افقی و عمودی قرار داده شده. برای tooltip هم همونطور که در جلسات قبلی توضیح داده شد، خاصیتهای crosshair و shared برابر با true قرار گرفت، تا با هاور کردن بر روی نقاط هر نمودار، اطلاعات همه اونا در یک tooltip و بصورت همزمان نمایش داده بشه. تمرکز اصلی ما در این قسمت بر روی اطلاعات موجود در series هست:

var series = [{
   name: 'Tokyo',
   marker: {
       symbol: 'square'
   },
   data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
       y: 26.5,
       marker: {
           symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
       }
   }, 23.3, 18.3, 13.9, 9.6]
}, {
   name: 'London',
   marker: {
       symbol: 'diamond'
   },
   data: [{
       y: 3.9,
       marker: {
           symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
       }
   }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}];

میبینید که دو سری اطلاعات رو قرار دادیم و نام اولی رو Tokyo و دومین مورد رو London قرار دادیم. با استفاده از ویژگی marker میتونین علامت و نشانه ای که روی هر نقطه نمودار نمایش داده میشه رو مشخص کنید. میتونین برای این کار از نشانه‌های از قبل تعریف شده مانند square یا diamond که بترتیب مربع و لوزی هستند، استفاده کنید و یا اینکه آدرس یک تصویر رو بدید که بعنوان نشانه از اون استفاده بشه. میتونین برای همه نقاط و حتی برای یک نقطه نشانه رو تغییر بدین. همونطور که در کد بالا دیدیدن نشانه رو برای دو نقطه تغییر دادیم. خروجی بصورت زیر خواهد بود:

spline marker

در قسمتهای بعد نمونه‌های دیگه ای رو در اختیارتون میزارم.

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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