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

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

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

نمونه اول : نمودار ستونی افقی ساده

دو نوع نمودار ستونی در highcharts قرار داده شده. یکی از اونها از نوع bar یا نمودار ستونی افقی هست و دیگری column یا نمودار ستونی عمودی هست.

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

<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: 'bar'
        };
        var title = {
            text: 'Historic World Population by Region'
        };
        var subtitle = {
            text: 'Source: Wikipedia.org'
        };
        var xAxis = {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        };
        var yAxis = {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        };
        var tooltip = {
            valueSuffix: ' millions'
        };
        var plotOptions = {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        };
        var legend = {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        };
        var credits = {
            enabled: false
        };

        var series = [{
            name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }, {
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            name: 'Year 2008',
            data: [973, 914, 4054, 732, 34]
        }];

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

    });
    </script>
</body>

</html>

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

var chart = {
    type: 'bar'
};

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

var plotOptions = {
    bar: {
        dataLabels: {
            enabled: true
        }
    }
};

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

var legend = {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 100,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
    shadow: true
};

با استفاده از کد بالا تنظیمات legend یا راهنمای نمودار رو تغییر دادیم. میبینید که اون رو بصورت عمودی و در سمت راست قرار دادیم و یک border یک پیکسلی برای اون در نظر گرفتیم و رنگ پس زمینه اون رو سفید کردیم. با قرار دادن true برای shadow یک سایه برای باکس راهنما قرار داده میشه. خروجی بصورت زیر خواهد بود:bar basic

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

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

<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: 'bar'
        };
        var title = {
            text: 'Bar 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 وارد شده اند اعداد منفی هم به چشم میخورن. خروجی بصورت زیر خواهد بود:bar negative

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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