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

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

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

نمونه نهم : نمودار ستونی با استفاده از داده‌های حدول HTML

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

<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/modules/data.js"></script>
</head>

<body>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
    <script language="JavaScript">
    $(document).ready(function() {
        var data = {
            table: 'datatable'
        };
        var chart = {
            type: 'column'
        };
        var title = {
            text: 'Data extracted from a HTML table in the page'
        };
        var yAxis = {
            allowDecimals: false,
            title: {
                text: 'Units'
            }
        };
        var tooltip = {
            formatter: function() {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.point.y + ' ' + this.point.name.toLowerCase();
            }
        };
        var credits = {
            enabled: false
        };

        var json = {};
        json.chart = chart;
        json.title = title;
        json.data = data;
        json.yAxis = yAxis;
        json.credits = credits;
        json.tooltip = tooltip;
        $('#container').highcharts(json);
    });
    </script>
    <table id="datatable">
        <thead>
            <tr>
                <th></th>
                <th>Jane</th>
                <th>John</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Apples</th>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <th>Pears</th>
                <td>2</td>
                <td>0</td>
            </tr>
            <tr>
                <th>Plums</th>
                <td>5</td>
                <td>11</td>
            </tr>
            <tr>
                <th>Bananas</th>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <th>Oranges</th>
                <td>2</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

میبینید که در انتها یک table قرار داده شده:

<table id="datatable">
  <thead>
      <tr>
          <th></th>
          <th>Jane</th>
          <th>John</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <th>Apples</th>
          <td>3</td>
          <td>4</td>
      </tr>
      <tr>
          <th>Pears</th>
          <td>2</td>
          <td>0</td>
      </tr>
      <tr>
          <th>Plums</th>
          <td>5</td>
          <td>11</td>
      </tr>
      <tr>
          <th>Bananas</th>
          <td>1</td>
          <td>1</td>
      </tr>
      <tr>
          <th>Oranges</th>
          <td>2</td>
          <td>4</td>
      </tr>
  </tbody>
</table>

میبینید که برای اون id برابر با datatable رو قرار دادیم. حالا قصد داریم که از روی داده‌های این جدول، یک نمودار رسم کنیم. برای اینکار بصورت زیر عمل میکنیم:

var data = {
   table: 'datatable'
};

میبینید که درون متغیر data که اطلاعات نمودار رو مشخص میکنه، id اون جدول مورد نظر رو درون ویژگی table قرار دادیم. با اینکار از داده‌های موجود در جدول با id ذکر شده، یک نمودار ستونی رسم میشه. خروجی بصورت زیر است:column table charts

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

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

<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 chart = {
            type: 'columnrange',
            inverted: true
        };
        var title = {
            text: 'Temperature variation by month'
        };
        var subtitle = {
            text: 'Observed in Vik i Sogn, Norway, 2009'
        };
        var xAxis = {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        };
        var yAxis = {
            title: {
                text: 'Temperature ( \xB0C )'
            }
        };
        var tooltip = {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        };
        var plotOptions = {
            columnrange: {
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        return this.y + '\xB0C';
                    }
                }
            }
        };
        var credits = {
            enabled: false
        };

        var series = [{
            name: 'Temperatures',
            data: [
                [-9.7, 9.4],
                [-8.7, 6.5],
                [-3.5, 9.4],
                [-1.4, 19.9],
                [0.0, 22.6],
                [2.9, 29.5],
                [9.2, 30.7],
                [7.3, 26.5],
                [4.4, 18.0],
                [-3.1, 11.4],
                [-5.2, 10.4],
                [-13.5, 9.8]
            ]
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.subtitle = subtitle;
        json.tooltip = tooltip;
        json.xAxis = xAxis;
        json.yAxis = yAxis;
        json.series = series;
        json.plotOptions = plotOptions;
        json.credits = credits;
        $('#container').highcharts(json);

    });
    </script>
</body>

</html>

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

var chart = {
   type: 'columnrange',
   inverted: true
};

میبینید که نوع نمودار رو برابر با columnrange قرار دادیم و با استفاده از true قرار دادن ویژگی inverted باعث میشیم که این نمودار بجای رسم شدن بصورت عمودی، بصورت افقی نمایش داده بشه. متغیر Series هم بصورت زیر قرار دادیم:

var series = [{
   name: 'Temperatures',
   data: [
       [-9.7, 9.4],
       [-8.7, 6.5],
       [-3.5, 9.4],
       [-1.4, 19.9],
       [0.0, 22.6],
       [2.9, 29.5],
       [9.2, 30.7],
       [7.3, 26.5],
       [4.4, 18.0],
       [-3.1, 11.4],
       [-5.2, 10.4],
       [-13.5, 9.8]
   ]
}];

میبینید که برای هر کدوم یک حداقل و یک حداکثر قرار دادیم. خروجی بصورت زیر است:column range chart

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

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

یا علی

Source

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

جلسات دوره

نیاز به لاگین

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

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

mtcoms

سلام آقای اسفندیاری خیلی ممنون بابت مطالب خوبتون میخواستم بپرسم اون فایل گیف آخر پست رو چجوری و با چه نرم افزاری ساختید ؟

محمد اسفندیاری

از این ابزار استفاده میشه:
https://screentogif.codeplex.com/
موفق باشید