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

‏  9 دقیقه
۲۴ اردیبهشت ۱۳۹۵

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

با استفاده از این دسته از نمودارها میتونین هر نمودار خطی (line) یا spline رو ساخته و در سایتتون قرار بدین. تنها فرق نمودارهای line و spline در اینه که در نمودار‌های spline خطهایی که نقاط رو به هم متصل میکنن با شیب ملایمی به هم وصل میشن ولی در نمودارهای line این نقاط با استفاده از خط راست به هم وصل میشوند.

نمونه اول : نمودار خطی ساده

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

<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 title = {
            text: 'Average Temperatures of Cities'
        };
        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 (\xB0C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        };

        var tooltip = {
            valueSuffix: '\xB0C'
        }

        var legend = {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        };

        var series = [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                26.5, 23.3, 18.3, 13.9, 9.6
            ]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
                24.1, 20.1, 14.1, 8.6, 2.5
            ]
        }, {
            name: 'London',
            data: [3.9, 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.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.legend = legend;
        json.series = series;

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

</html>

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

اگه خروجی رو ببینیم بصورت زیر هست:basic line

نمونه دوم : نمودار بهمراه label

همونطور که دیدید در نمودار اول بر روی هر کدام از خط نمودارها عددی نوشته نشده بود و زمانی که بر روی اونا هاور میشد یک tooltip باز میشد و اطلاعات اون رو نمایش میداد. حالا میخایم کاری کنیم که عدد هر کدوم در کنار خودش نمایش داده بشه و دیگه با هاور هم چیزی نمایش داده نشه. کد کلی اون بصورت زیر هست:

<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 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 (\xB0C)'
            }
        };
        var plotOptions = {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        };
        var series = [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'London',
            data: [3.9, 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.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.series = series;
        json.plotOptions = plotOptions;
        $('#container').highcharts(json);

    });
    </script>
</body>

</html>

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

var plotOptions = {
   line: {
       dataLabels: {
           enabled: true
       },
       enableMouseTracking: false
   }
};

مینید که درون ویژگی plotOptions، ویژگی line رو قرار داده و میخاد یک سری از تنظیمات اون رو تغییر بده.

با استفاده از ویژگی dataLabels و true قرار دادن اون عددهای هر کدوم از نقاط در کنارشون نمایش داده میشه. با استفاده از false قرار دادن ویژگی enableMouseTracking هم زمانی که بر روی نقاط Hover میکنید، Tooltip نمایش داده نمیشه و اثری نداره. خروجی این حالت بصورت زیر هست:line chart label

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

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

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

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

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