تخفیف ویژه

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

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

در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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 = {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        };
        var title = {
            text: 'Browser market shares at a specific website, 2014'
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };
        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        };
        var series = [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox', 45.0],
                ['IE', 26.8], {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari', 8.5],
                ['Opera', 6.2],
                ['Others', 0.7]
            ]
        }];

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

</html>

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

var chart = {
   plotBackgroundColor: null,
   plotBorderWidth: null,
   plotShadow: false
};

این کد باعث میشه که رنگ پس زمینه نمودار حذف بشه و حاشیه یا border نداشته باشه و همچنین نمودارمون سایه ای نداشته باشه.

var series = [{
   type: 'pie',
   name: 'Browser share',
   data: [
       ['Firefox', 45.0],
       ['IE', 26.8], {
           name: 'Chrome',
           y: 12.8,
           sliced: true,
           selected: true
       },
       ['Safari', 8.5],
       ['Opera', 6.2],
       ['Others', 0.7]
   ]
}];

با استفاده از این کد هم اطلاعات و داده هایی که قصد داریم در نمودار مشخص بشه رو قرار دادیم. میبینید که نوع اون رو برابر با pie یا همون دایره ای قرار دادیم و برای اون یک اسم مشخص کردیم و بعد از اون درون ویژگی Data، داده‌های مورد نظرمون رو قرار دادیم. این داده‌ها در مورد درصد استفاده کنندگان از مرورگرهای مختلف در سال 2014 است. خروجی بصورت زیر هست:pie basic charts

نمونه دوم : نمودار دایره ای به همراه راهنما

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

<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 = {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        };
        var title = {
            text: 'Browser market shares at a specific website, 2014'
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };
        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        };
        var series = [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox', 45.0],
                ['IE', 26.8], {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari', 8.5],
                ['Opera', 6.2],
                ['Others', 0.7]
            ]
        }];

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

</html>

میبینید که اکتر کدها شبیه به نمونه اول است، بجز کد زیر:

var plotOptions = {
   pie: {
       allowPointSelect: true,
       cursor: 'pointer',
       dataLabels: {
           enabled: false
       },
       showInLegend: true
   }
};

میبینید که datalabel که در نمونه اول بود رو برداشتیم و بجای اون با true قرار دادن showInLegend، راهنما رو برای اون قرار دادیم تا کاربران بتونین با نمودار تعامل داشته باشن. خروجی بصورت زیر است:pie chart with legend

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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