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

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

در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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>
    <script src="http://code.highcharts.com/highcharts-more.js"></script>
</head>

<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    <script language="JavaScript">
    $(document).ready(function() {
        var ranges = [
            [1246406400000, 14.3, 27.7],
            [1246492800000, 14.5, 27.8],
            [1246579200000, 15.5, 29.6],
            [1246665600000, 16.7, 30.7],
            [1246752000000, 16.5, 25.0],
            [1246838400000, 17.8, 25.7],
            [1246924800000, 13.5, 24.8],
            [1247011200000, 10.5, 21.4],
            [1247097600000, 9.2, 23.8],
            [1247184000000, 11.6, 21.8],
            [1247270400000, 10.7, 23.7],
            [1247356800000, 11.0, 23.3],
            [1247443200000, 11.6, 23.7],
            [1247529600000, 11.8, 20.7],
            [1247616000000, 12.6, 22.4],
            [1247702400000, 13.6, 19.6],
            [1247788800000, 11.4, 22.6],
            [1247875200000, 13.2, 25.0],
            [1247961600000, 14.2, 21.6],
            [1248048000000, 13.1, 17.1],
            [1248134400000, 12.2, 15.5],
            [1248220800000, 12.0, 20.8],
            [1248307200000, 12.0, 17.1],
            [1248393600000, 12.7, 18.3],
            [1248480000000, 12.4, 19.4],
            [1248566400000, 12.6, 19.9],
            [1248652800000, 11.9, 20.2],
            [1248739200000, 11.0, 19.3],
            [1248825600000, 10.8, 17.8],
            [1248912000000, 11.8, 18.5],
            [1248998400000, 10.8, 16.1]
        ];
        var averages = [
            [1246406400000, 21.5],
            [1246492800000, 22.1],
            [1246579200000, 23],
            [1246665600000, 23.8],
            [1246752000000, 21.4],
            [1246838400000, 21.3],
            [1246924800000, 18.3],
            [1247011200000, 15.4],
            [1247097600000, 16.4],
            [1247184000000, 17.7],
            [1247270400000, 17.5],
            [1247356800000, 17.6],
            [1247443200000, 17.7],
            [1247529600000, 16.8],
            [1247616000000, 17.7],
            [1247702400000, 16.3],
            [1247788800000, 17.8],
            [1247875200000, 18.1],
            [1247961600000, 17.2],
            [1248048000000, 14.4],
            [1248134400000, 13.7],
            [1248220800000, 15.7],
            [1248307200000, 14.6],
            [1248393600000, 15.3],
            [1248480000000, 15.3],
            [1248566400000, 15.8],
            [1248652800000, 15.2],
            [1248739200000, 14.8],
            [1248825600000, 14.4],
            [1248912000000, 15],
            [1248998400000, 13.6]
        ];

        var title = {
            text: 'July temperatures'
        };
        var xAxis = {
            type: 'datetime'
        };
        var yAxis = {
            title: {
                text: null
            }
        };
        var tooltip = {
            shared: true,
            crosshairs: true,
            valueSuffix: '\xB0C'
        };
        var legend = {}
        var series = [{
            name: 'Temperature',
            data: averages,
            zIndex: 1,
            marker: {
                fillColor: 'white',
                lineWidth: 2,
                lineColor: Highcharts.getOptions().colors[0]
            }
        }, {
            name: 'Range',
            data: ranges,
            type: 'arearange',
            lineWidth: 0,
            linkedTo: ':previous',
            color: Highcharts.getOptions().colors[0],
            fillOpacity: 0.3,
            zIndex: 0
        }];
        var json = {};
        json.title = title;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.tooltip = tooltip;
        json.legend = legend;
        json.series = series;
        $('#container').highcharts(json);
    });
    </script>
</body>

</html>

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

var xAxis = {
   type: 'datetime'
};
var yAxis = {
   title: {
       text: null
   }
};

میبینید که در ابتدا نوع داده‌های محور افقی رو از نوع datetime قرار دادیم و حالا به عنوان مقدار باید timestamp بصورت میلی ثانیه وارد کنید و این ابزار خودش اون رو بصورت تاریخ میلادی در میاره و در نمودار نمایش داده میشه. برای محور عمودی هم title نزاشتیم. برای بازه مورد نظر اعداد زیر رو در نظر گرفتیم:

var ranges = [
   [1246406400000, 14.3, 27.7],
   [1246492800000, 14.5, 27.8],
   [1246579200000, 15.5, 29.6],
   [1246665600000, 16.7, 30.7],
   [1246752000000, 16.5, 25.0],
   [1246838400000, 17.8, 25.7],
   [1246924800000, 13.5, 24.8],
   [1247011200000, 10.5, 21.4],
   [1247097600000, 9.2, 23.8],
   [1247184000000, 11.6, 21.8],
   [1247270400000, 10.7, 23.7],
   [1247356800000, 11.0, 23.3],
   [1247443200000, 11.6, 23.7],
   [1247529600000, 11.8, 20.7],
   [1247616000000, 12.6, 22.4],
   [1247702400000, 13.6, 19.6],
   [1247788800000, 11.4, 22.6],
   [1247875200000, 13.2, 25.0],
   [1247961600000, 14.2, 21.6],
   [1248048000000, 13.1, 17.1],
   [1248134400000, 12.2, 15.5],
   [1248220800000, 12.0, 20.8],
   [1248307200000, 12.0, 17.1],
   [1248393600000, 12.7, 18.3],
   [1248480000000, 12.4, 19.4],
   [1248566400000, 12.6, 19.9],
   [1248652800000, 11.9, 20.2],
   [1248739200000, 11.0, 19.3],
   [1248825600000, 10.8, 17.8],
   [1248912000000, 11.8, 18.5],
   [1248998400000, 10.8, 16.1]
];

برای همین timestamp‌ها و در هر نقطه میانگین رو هم حساب میکنیم و قرار میدیم:

var averages = [
   [1246406400000, 21.5],
   [1246492800000, 22.1],
   [1246579200000, 23],
   [1246665600000, 23.8],
   [1246752000000, 21.4],
   [1246838400000, 21.3],
   [1246924800000, 18.3],
   [1247011200000, 15.4],
   [1247097600000, 16.4],
   [1247184000000, 17.7],
   [1247270400000, 17.5],
   [1247356800000, 17.6],
   [1247443200000, 17.7],
   [1247529600000, 16.8],
   [1247616000000, 17.7],
   [1247702400000, 16.3],
   [1247788800000, 17.8],
   [1247875200000, 18.1],
   [1247961600000, 17.2],
   [1248048000000, 14.4],
   [1248134400000, 13.7],
   [1248220800000, 15.7],
   [1248307200000, 14.6],
   [1248393600000, 15.3],
   [1248480000000, 15.3],
   [1248566400000, 15.8],
   [1248652800000, 15.2],
   [1248739200000, 14.8],
   [1248825600000, 14.4],
   [1248912000000, 15],
   [1248998400000, 13.6]
];

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

var tooltip = {
   shared: true,
   crosshairs: true,
   valueSuffix: '\xB0C'
};

میبینید که shared و crosshairs رو برابر با true قرار دادیم و valueSuffix هم برابر با درجه سانتیگراد قرار دادیم تا به همه اعداد در tooltip یک پسوند درجه سانتی گراد اضافه کنه. حالا میرسیم به قسمت مهم این مطلب و اون هم متغیر series هست:

var series = [{
   name: 'Temperature',
   data: averages,
   zIndex: 1,
   marker: {
       fillColor: 'white',
       lineWidth: 2,
       lineColor: Highcharts.getOptions().colors[0]
   }
}, {
   name: 'Range',
   data: ranges,
   type: 'arearange',
   lineWidth: 0,
   linkedTo: ':previous',
   color: Highcharts.getOptions().colors[0],
   fillOpacity: 0.3,
   zIndex: 0
}];

میبینید که دو سری تعریف کردیم. اولین مورد رو بنام Temprature قرار دادیم و اطلاعات اون رو هم همون آرایه average قرار دادیم و zIndex اون رو هم برابر با 1 قرار دادیم و کاری کردیم که روی اون بازه دیگه قرار بگیره و بالاتر باشه. با استفاده از marker هم رنگ و ضخامت خط و .... رو مشخص کردیم.

برای سری دوم هم نام Range رو قرار دادیم و اطلاعات اون رو هم همون آرایه ranges قرار دادیم و نوع اون رو arearange قرار دادیم تا بصورت بازه ای نمایش داده بشه. با استفاده از ویژگی linkedTo اون رو به سری قبلی ربط دادیم و متصل کردیم. zIndex رو هم برابر با 0 قرار دادیم تا زیر اون نمودار خطی قرار بگیره.

خروجی کار بصورت زیر خواهد بود:Area line range

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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