تخفیف ویژه

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

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

در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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-3d.js"></script>
</head>

<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    <div id="sliders">
        <table>
            <tr>
                <td>Alpha Angle</td>
                <td>
                    <input id="R0" type="range" min="0" max="45" value="15" /> <span id="R0-value" class="value"></span></td>
            </tr>
            <tr>
                <td>Beta Angle</td>
                <td>
                    <input id="R1" type="range" min="0" max="45" value="15" /> <span id="R1-value" class="value"></span></td>
            </tr>
        </table>
    </div>
    <script language="JavaScript">
    $(document).ready(function() {
        var chart = {
            renderTo: 'container',
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        };
        var title = {
            text: 'Chart rotation demo'
        };
        var subtitle = {
            text: 'Test options by dragging the sliders below'
        };

        var plotOptions = {
            column: {
                depth: 25
            }
        };
        var series = [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.subtitle = subtitle;
        json.series = series;
        json.plotOptions = plotOptions;
        var highchart = new Highcharts.Chart(json);

        function showValues() {
            $('#R0-value').html(highchart.options.chart.options3d.alpha);
            $('#R1-value').html(highchart.options.chart.options3d.beta);
        }

        // Activate the sliders
        $('#R0').on('change', function() {
            highchart.options.chart.options3d.alpha = this.value;
            showValues();
            highchart.redraw(false);
        });
        $('#R1').on('change', function() {
            highchart.options.chart.options3d.beta = this.value;
            showValues();
            highchart.redraw(false);
        });

        showValues();
    });
    </script>
</body>

</html>

میبینید که در ابتدا علاوه بر کتابخانه Highcharts، کدهای مخصوص برای پشتیبانی از حالت سه بعدی هم اضافه شدن:

<script src="http://code.highcharts.com/highcharts-3d.js"></script>

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

var chart = {
   renderTo: 'container',
   type: 'column',
   margin: 75,
   options3d: {
       enabled: true,
       alpha: 15,
       beta: 15,
       depth: 50,
       viewDistance: 25
   }
};

میبینید که با استفاده از ویژگی renderTo کاری کردیم که نتیجه نمودار سه بعدی در المنت container رندر و نمایش داده بشه. میبینید که نوع اون رو ستونی قرار دادیم و همچنین فاصله اون از اطراف رو 75 پیکسل در نظر گرفتیم. با استفاده از ویژگی options3d هم تنظیمات اون رو مشخص کردیم. با استفاده از true قرار دادن ویژگی enabled، حالت سه بعدی رو برای نمودار فعال میکنیم. با استفاده از alpha زاویه چرخش نمودار حول محور افقی و با استفاده از ویژگی beta، زاویه چرخش رو حول محور عمودی مشخص میکنیم. با استفاده از ویژگی depth هم عمق یا ضخامت کل نمودار رو مشخص میکنیم. با ویژگی viewDistance هم فاصله ناظر ار نمودار رو برابر با 25 پیکسل قرار دادیم تا کاربران بتونن به درستی حالت سه بعدی رو ببینن.

تا اینجا نمودار درسته و کار دیگه ای نداره. اما میتونیم با استفاده از قرار دادن ورودی هایی از نوع range، کاری کنیم که با تغییر دادن اونا، زوایای چرخش نمودار نیز تغییر کنه. برای اینکار ابتدا کدهای HTML زیر رو قرار میدیم:

<div id="sliders">
  <table>
      <tr>
          <td>Alpha Angle</td>
          <td>
              <input id="R0" type="range" min="0" max="45" value="15" /> <span id="R0-value" class="value"></span></td>
      </tr>
      <tr>
          <td>Beta Angle</td>
          <td>
              <input id="R1" type="range" min="0" max="45" value="15" /> <span id="R1-value" class="value"></span></td>
      </tr>
  </table>
</div>

با استفاده از کدهای زیر هم زمانی که این ورودی‌ها رو تغییر میدیم، نمودار متناسب با عددی که انتخاب کردیم، دوباره کشیده میشه و با کاربران نمایش داده میشه:

function showValues() {
   $('#R0-value').html(highchart.options.chart.options3d.alpha);
   $('#R1-value').html(highchart.options.chart.options3d.beta);
}

// Activate the sliders
$('#R0').on('change', function() {
   highchart.options.chart.options3d.alpha = this.value;
   showValues();
   highchart.redraw(false);
});
$('#R1').on('change', function() {
   highchart.options.chart.options3d.beta = this.value;
   showValues();
   highchart.redraw(false);
});

showValues();

میبینید که از رویداد change برای ورودی‌ها استفاده کردیم و در جاهای مختلف هم از تابع showValues استفاده کزدیم. خروجی بصورت زیر خواهد بود:3d column chart

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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