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

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

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

نمونه پنجم : نمودار سطحی با مقادیر NULL

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

<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: 'area',
            spacingBottom: 30
        };
        var title = {
            text: 'Fruit consumption *'
        };
        var subtitle = {
            text: '* Jane\'s banana consumption is unknown',
            floating: true,
            align: 'right',
            verticalAlign: 'bottom',
            y: 15
        };
        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: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
        };
        var yAxis = {
            title: {
                text: 'Y-Axis'
            },
            labels: {
                formatter: function() {
                    return this.value;
                }
            }
        };
        var tooltip = {
            formatter: function() {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.x + ': ' + this.y;
            }
        };
        var plotOptions = {
            area: {
                fillOpacity: 0.5
            }
        };
        var credits = {
            enabled: false
        };
        var series = [{
            name: 'John',
            data: [0, 1, 4, 4, 5, 2, 3, 7]
        }, {
            name: 'Jane',
            data: [1, 0, 3, null, 3, 1, 2, 1]
        }];

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

    });
    </script>
</body>

</html>

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

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

یکی از مقادیر null هست. خروجی نمودار بصورت زیر هست:missing area

میبینید که اون مقداری که null هست در نمودار نمایش داده نشده و این نمودار به خوبی نمایش داده شده.

نمونه ششم : نمودار سطحی با محورهای معکوس

در این نمونه محورهای نمودار رو معکوس کردیم و جای محور x و y رو با هم عوض کردیم. کل کدهای مربوط به این نمونه رو در اختیارتون میزارم و بعد براتون توضیح میدم:

<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: 'area',
            inverted: true
        };
        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: 'Number of units'
            },
            labels: {
                formatter: function() {
                    return this.value;
                }
            },
            min: 0
        };
        var plotOptions = {
            area: {
                fillOpacity: 0.5
            }
        };
        var credits = {
            enabled: false
        };
        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: 'area',
   inverted: true
};

میبینید که ویژگی inverted رو برابر با true قرار دادیم و با اینکار محورها معکوس میشن و جاشون عوض میشه. خروجی بصورت زیر هست:inverted area

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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