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

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

در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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 = {
            zoomType: 'xy'
        };
        var subtitle = {
            text: 'Source: WorldClimate.com'
        };
        var title = {
            text: 'Average Monthly Weather Data for Tokyo'
        };
        var xAxis = {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            crosshair: true
        };
        var yAxis = [{ // Primary yAxis
            labels: {
                format: '{value}\xB0C',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            opposite: true
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }
        }, { // Tertiary yAxis
            gridLineWidth: 0,
            title: {
                text: 'Sea-Level Pressure',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            labels: {
                format: '{value} mb',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            opposite: true
        }];
        var tooltip = {
            shared: true
        };
        var legend = {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        };
        var series = [{
            name: 'Rainfall',
            type: 'column',
            yAxis: 1,
            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],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Sea-Level Pressure',
            type: 'spline',
            yAxis: 2,
            data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
            marker: {
                enabled: false
            },
            dashStyle: 'shortdot',
            tooltip: {
                valueSuffix: ' mb'
            }
        }, {
            name: 'Temperature',
            type: 'spline',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            tooltip: {
                valueSuffix: '\xB0C'
            }
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.subtitle = subtitle;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.legend = legend;
        json.series = series;
        $('#container').highcharts(json);
    });
    </script>
</body>

</html>

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

var yAxis = [{ // Primary yAxis
   labels: {
       format: '{value}\xB0C',
       style: {
           color: Highcharts.getOptions().colors[2]
       }
   },
   title: {
       text: 'Temperature',
       style: {
           color: Highcharts.getOptions().colors[2]
       }
   },
   opposite: true
}, { // Secondary yAxis
   title: {
       text: 'Rainfall',
       style: {
           color: Highcharts.getOptions().colors[0]
       }
   },
   labels: {
       format: '{value} mm',
       style: {
           color: Highcharts.getOptions().colors[0]
       }
   }
}, { // Tertiary yAxis
   gridLineWidth: 0,
   title: {
       text: 'Sea-Level Pressure',
       style: {
           color: Highcharts.getOptions().colors[1]
       }
   },
   labels: {
       format: '{value} mb',
       style: {
           color: Highcharts.getOptions().colors[1]
       }
   },
   opposite: true
}];

در نمونه قبلی فقط درون متغیر yAxis دو عضو قرار دادیم، ولی در اینجا سه عضو قرار دادیم و با استفاده از این روش سه محور عمودی خواهیم داشت. شما میتونین از هر چنتایی که بخواید استفاده کنید. درون هر عضو هم دو ویژگی title و labels قرار داده شده که با استفاده از اونا ویژگی‌های عنوان و label‌ها رو مشخص میکنیم. در نهایت هم مثل گذشته ویژگی opposite رو برابر با true قرار دادیم تا محور‌ها در سمتهای مختلفی قرار بگیرن.

var series = [{
   name: 'Rainfall',
   type: 'column',
   yAxis: 1,
   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],
   tooltip: {
       valueSuffix: ' mm'
   }

}, {
   name: 'Sea-Level Pressure',
   type: 'spline',
   yAxis: 2,
   data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
   marker: {
       enabled: false
   },
   dashStyle: 'shortdot',
   tooltip: {
       valueSuffix: ' mb'
   }
}, {
   name: 'Temperature',
   type: 'spline',
   data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
   tooltip: {
       valueSuffix: '\xB0C'
   }
}];

در متغیر Series هم سه سری داده وارد کردیم و دو تا از اونا از نوع spline هست و دیگری از نوع ستونی هست. خروجی بصورت زیر خواهد بود:combination multiple axes

نمونه چهارم : نمودار پراکندگی به همراه خط رگرسیون

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

<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 title = {
            text: 'Scatter plot with regression line'
        };
        var xAxis = {
            min: -0.5,
            max: 5.5
        };
        var yAxis = {
            min: 0
        };
        var series = [{
            type: 'line',
            name: 'Regression Line',
            data: [
                [0, 1.11],
                [5, 4.51]
            ],
            marker: {
                enabled: false
            },
            states: {
                hover: {
                    lineWidth: 0
                }
            },
            enableMouseTracking: false
        }, {
            type: 'scatter',
            name: 'Observations',
            data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
            marker: {
                radius: 4
            }
        }];

        var json = {};
        json.title = title;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.series = series;
        $('#container').highcharts(json);
    });
    </script>
</body>

</html>

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

var series = [{
   type: 'line',
   name: 'Regression Line',
   data: [
       [0, 1.11],
       [5, 4.51]
   ],
   marker: {
       enabled: false
   },
   states: {
       hover: {
           lineWidth: 0
       }
   },
   enableMouseTracking: false
}, {
   type: 'scatter',
   name: 'Observations',
   data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
   marker: {
       radius: 4
   }
}];

میبینید که دو دسته داده قرار دادیم. یکی از اونا از نوع Scatter یا پراکندگی هست و همون داده هایی هست که میخایم خط رگرسیون اونا رو رسم کنیم. یکی دیگه از داده‌ها بصورت خطی هست و در اینجا نقش خط رگرسیون رو بازی میکنه. خروجی اون بصورت زیر هست:scatter combination chart

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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