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

‏ 10 دقیقه

۳۰ اردیبهشت ۱۳۹۵

در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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: 'area'
        };
        var title = {
            text: 'US and USSR nuclear stockpiles'
        };
        var subtitle = {
            text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                'thebulletin.metapress.com</a>'
        };
        var xAxis = {
            allowDecimals: false,
            labels: {
                formatter: function() {
                    return this.value; // clean, unformatted number for year
                }
            }
        };
        var yAxis = {
            title: {
                text: 'Nuclear weapon states'
            },
            labels: {
                formatter: function() {
                    return this.value / 1000 + 'k';
                }
            }
        };
        var tooltip = {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
        };
        var plotOptions = {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        };
        var series = [{
            name: 'USA',
            data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
                1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104
            ]
        }, {
            name: 'USSR/Russia',
            data: [null, null, null, null, null, null, null, null, null, null,
                5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
                4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
                15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
                33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
                35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
                21000, 20000, 19000, 18000, 18000, 17000, 16000
            ]
        }];

        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>

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

var chart = {
    type: 'area'
};

با استفاده از ویژگی type، نوع نمودار را area یا سطحی در نظر گرفتیم. با بقیه کدها هم باید تقریبا آشنا باشید، اونایی هم که یادتون نمیاد میتونین تغییر بدین تا ببینید مربوط به چه چیزی هست. خروجی بصورت زیر خواهد بود:

نمونه دوم : نمودار سطحی با مقادیر منفی

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

<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'
        };
        var title = {
            text: 'Area 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 credits = {
    enabled: false
};

این کد اگر برابر با true باشه که مقدار پیش فرضش هست، باعث میشه که لینکی در پایین و سمت راست نمودار نمایش داده بشه، بصورت زیر:در بالا اون رو false قرار دادیم و بهمین خاطر نمایش داده نمیشه. خروجی کلی نمودار بصورت زیر خواهد بود: