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

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

در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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: 'column'
        };
        var title = {
            text: 'Monthly Average Rainfall'
        };
        var subtitle = {
            text: 'Source: WorldClimate.com'
        };
        var xAxis = {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            crosshair: true
        };
        var yAxis = {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        };
        var tooltip = {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        };
        var plotOptions = {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        };
        var credits = {
            enabled: false
        };

        var series = [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
        }, {
            name: 'London',
            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
        }, {
            name: 'Berlin',
            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }];

        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;
        json.credits = credits;
        $('#container').highcharts(json);

    });
    </script>
</body>

</html>

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

var chart = {
   type: 'column'
};

در ابتدا با استفاده از ویژگی type، نوع این نمودار رو برابر با column یا ستونی قرار دادیم و با اینکار داده‌های مورد نظرمون بصورت ستونی در نمودار رسم خواهند شد.

var tooltip = {
   headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
   pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
       '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
   footerFormat: '</table>',
   shared: true,
   useHTML: true
};

با استفاده از کد بالا tooltip رو بصورت کامل تغییر دادیم و از کدهای html برای اون استفاده کردیم. با قرار دادن true برای ویژگی useHTML باعث میشیم که بتونیم از کدهای html استفاده کنیم. با استفاده از ویژگی‌های headerFormat و pointFormat و footerFormat هم استایل tooltip رو مشخص کردیم و اون رو درون یک table قرار دادیم. خروجی بصورت زیر میشه:column basic chart

نمونه دوم : نمودار ستونی عمودی بهمراه اعداد منفی

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

<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: 'column'
        };
        var title = {
            text: 'Column chart with negative values'
        };
        var xAxis = {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        };
        var credits = {
            enabled: false
        };
        var series = [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, -2, -3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, -2, 5]
        }];

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

    });
    </script>
</body>

</html>

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

var series = [{
   name: 'John',
   data: [5, 3, 4, 7, 2]
}, {
   name: 'Jane',
   data: [2, -2, -3, 2, 1]
}, {
   name: 'Joe',
   data: [3, 4, 4, -2, 5]
}];

میبینید که در داده هایی که در series وارد شده اند اعداد منفی هم به چشم میخورن. خروجی بصورت زیر خواهد بود:negative column chart

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

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

یا علی

Source

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

جلسات دوره

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

الی خدایی

خیلی ممنون..لطف کردین..

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

موفق باشید

الی خدایی

سلام..با تشکر از سایت خوب و کامل تان..
برای قسمت دیتاهای نمودار نمیشه داده هارو از دیتابیس دریافت کرد؟؟
میشه راهنمایی و یا مقاله ای معرفی نمایید؟
با تشکر

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

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

الی خدایی

خیلی ممنون از پاسخ تون..خیلی خوبه که انسان هایی مثله شما هستن که علم رو به بقیه یاد میدن..
ممنون میشم شماره جلسات رو بگید..چون خیلی زیاد هستن..من نتونستم پیدا کنم..
خیلی خیلی ممنون میشم

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

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

نیاز به لاگین

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