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

‏ 8 دقیقه

۰۳ تیر ۱۳۹۵

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

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

در این نمونه میخایم یک نمونه نمودار رو در اختیارتون قرار بدیم داده‌ها در اون بصورت حرارتی یا Heat 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>
    <script src="http://code.highcharts.com/highcharts-more.js"></script>
    <script src="http://code.highcharts.com/modules/heatmap.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: 'heatmap',
            marginTop: 40,
            marginBottom: 80
        };
        var title = {
            text: 'Sales per employee per weekday'
        };

        var xAxis = {
            categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
        };

        var yAxis = {
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
            title: null
        };

        var colorAxis = {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        };

        var legend = {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 280
        };

        var tooltip = {
            formatter: function() {
                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
                    this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
            }
        };

        var series = [{
            name: 'Sales per employee',
            borderWidth: 1,
            data: [
                [0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91] ],
            dataLabels: {
                enabled: true,
                color: '#000000'
            }
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.colorAxis = colorAxis;
        json.legend = legend;
        json.tooltip = tooltip;
        json.series = series;

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

</html>

میبینید که علاوه بر فایل اصلی Highchart، فایلهای highcharts-more.js و heatmap.js قرار داده شده است.

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

var chart = {
   type: 'heatmap',
   marginTop: 40,
   marginBottom: 80
};

میبینید که نوع نمودار رو برابر با heatmap یا نمودار حرارتی قرار دادیم و یکی از ویژگی هایی که این نمودارها بر پایه اون ساخته شدن، رنگ هست. میبینید که فاصله از بالا و پایین نمودار رو بترتیب برابر با 40 و 80 قرار دادیم.

var xAxis = {
   categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
};

var yAxis = {
   categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
   title: null
};

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

var colorAxis = {
   min: 0,
   minColor: '#FFFFFF',
   maxColor: Highcharts.getOptions().colors[0]
};

با استفاده از متغیر colorAxis بازه تغییر رنگ بر روی محور رو مشخص کردیم. میبینید که حداقل مقدار رو برابر با 0 قرار دادیم و همچنین رنگ شروع رو سفید قرار دادیم و اون رو به یک رنگ تقریبا آبی خاتمه دادیم.

var legend = {
   align: 'right',
   layout: 'vertical',
   margin: 0,
   verticalAlign: 'top',
   y: 25,
   symbolHeight: 280
};

با استفاده از متغیر legend اون محور نمایش دهنده رو در سمت راست قرار دادیم و استایل اون رو عمودی در نظر گرفتیم.

var tooltip = {
   formatter: function() {
       return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
           this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
   }
};

با استفاده از کد بالا یک تولتیپی که با هاور کردن بر روی نمودار نمایش داده میشه رو مشخص کردیم و استایلشو درست کردیم.

var series = [{
   name: 'Sales per employee',
   borderWidth: 1,
   data: [
       [0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91] ],
   dataLabels: {
       enabled: true,
       color: '#000000'
   }
}];

با استفاده از کد بالا داده‌های ورودی نمودار رو مشخص کردیم. خروجی بصورت زیر هست: