تخفیف ویژه

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

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

در این جلسه با ادامه موضوع مربوط به رسم نمودار با 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/modules/drilldown.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() {

        Highcharts.data({
            csv: document.getElementById('tsv').innerHTML,
            itemDelimiter: '\t',
            parsed: function(columns) {
                var brands = {},
                    brandsData = [],
                    versions = {},
                    drilldownSeries = [];

                // Parse percentage strings
                columns[1] = $.map(columns[1], function(value) {
                    if (value.indexOf('%') === value.length - 1) {
                        value = parseFloat(value);
                    }
                    return value;
                });

                $.each(columns[0], function(i, name) {
                    var brand, version;

                    if (i > 0) {

                        // Remove special edition notes
                        name = name.split(' -')[0];

                        // Split into brand and version
                        version = name.match(/([0-9]+[\.0-9x]*)/);
                        if (version) {
                            version = version[0];
                        }
                        brand = name.replace(version, '');

                        // Create the main data
                        if (!brands[brand]) {
                            brands[brand] = columns[1][i];
                        } else {
                            brands[brand] += columns[1][i];
                        }

                        // Create the version data
                        if (version !== null) {
                            if (!versions[brand]) {
                                versions[brand] = [];
                            }
                            versions[brand].push(['v' + version, columns[1][i]]);
                        }
                    }

                });

                $.each(brands, function(name, y) {
                    brandsData.push({
                        name: name,
                        y: y,
                        drilldown: versions[name] ? name : null
                    });
                });
                $.each(versions, function(key, value) {
                    drilldownSeries.push({
                        name: key,
                        id: key,
                        data: value
                    });
                });

                var chart = {
                    type: 'column'
                };
                var title = {
                    text: 'Browser market shares. November, 2013'
                };
                var subtitle = {
                    text: 'Click the columns to view versions. Source: netmarketshare.com.'
                };
                var xAxis = {
                    type: 'category'
                };
                var yAxis = {
                    title: {
                        text: 'Total percent market share'
                    }
                };
                var tooltip = {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                };
                var credits = {
                    enabled: false
                };
                var series = [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: brandsData
                }];
                var drilldown = {
                    series: drilldownSeries
                }

                var json = {};
                json.chart = chart;
                json.title = title;
                json.subtitle = subtitle;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.tooltip = tooltip;
                json.credits = credits;
                json.series = series;
                json.drilldown = drilldown;
                $('#container').highcharts(json);
            }
        });
    });
    </script>
    
<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">
Browser Version   Total Market Share
Microsoft Internet Explorer 8.0  26.61%
Microsoft Internet Explorer 9.0  16.96%
Chrome 18.0 8.01%
Chrome 19.0 7.73%
Firefox 12  6.72%
Microsoft Internet Explorer 6.0  6.40%
Firefox 11  4.72%
Microsoft Internet Explorer 7.0  3.55%
Safari 5.1  3.53%
Firefox 13  2.16%
Firefox 3.6 1.87%
Opera 11.x  1.30%
Chrome 17.0 1.13%
Firefox 10  0.90%
Safari 5.0  0.85%
Firefox 9.0 0.65%
Firefox 8.0 0.55%
Firefox 4.0 0.50%
Chrome 16.0 0.45%
Firefox 3.0 0.36%
Firefox 3.5 0.36%
Firefox 6.0 0.32%
Firefox 5.0 0.31%
Firefox 7.0 0.29%
Proprietary or Undetectable   0.29%
Chrome 18.0 - Maxthon Edition 0.26%
Chrome 14.0 0.25%
Chrome 20.0 0.24%
Chrome 15.0 0.18%
Chrome 12.0 0.16%
Opera 12.x  0.15%
Safari 4.0  0.14%
Chrome 13.0 0.13%
Safari 4.1  0.12%
Chrome 11.0 0.10%
Firefox 14  0.10%
Firefox 2.0 0.09%
Chrome 10.0 0.09%
Opera 10.x  0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition  0.09%
</pre>
</body>

</html>

این نمودار میاد و برندهای مختلفی که برای مرورگرها مورد استفاده قرار میگیره رو به همراه ورژن‌ها اون بر روی خود نمایش میده.

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

<pre id="tsv" style="display:none">
Browser Version   Total Market Share
Microsoft Internet Explorer 8.0  26.61%
Microsoft Internet Explorer 9.0  16.96%
Chrome 18.0 8.01%
Chrome 19.0 7.73%
Firefox 12  6.72%
Microsoft Internet Explorer 6.0  6.40%
Firefox 11  4.72%
Microsoft Internet Explorer 7.0  3.55%
Safari 5.1  3.53%
Firefox 13  2.16%
Firefox 3.6 1.87%
Opera 11.x  1.30%
Chrome 17.0 1.13%
Firefox 10  0.90%
Safari 5.0  0.85%
Firefox 9.0 0.65%
Firefox 8.0 0.55%
Firefox 4.0 0.50%
Chrome 16.0 0.45%
Firefox 3.0 0.36%
Firefox 3.5 0.36%
Firefox 6.0 0.32%
Firefox 5.0 0.31%
Firefox 7.0 0.29%
Proprietary or Undetectable   0.29%
Chrome 18.0 - Maxthon Edition 0.26%
Chrome 14.0 0.25%
Chrome 20.0 0.24%
Chrome 15.0 0.18%
Chrome 12.0 0.16%
Opera 12.x  0.15%
Safari 4.0  0.14%
Chrome 13.0 0.13%
Safari 4.1  0.12%
Chrome 11.0 0.10%
Firefox 14  0.10%
Firefox 2.0 0.09%
Chrome 10.0 0.09%
Opera 10.x  0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition  0.09%
</pre>

در این تگ pre اطلاعات مورد نظری که قصد داریم در نمودار نمایش داده بشه رو قرار میدیم. میبینید که با استفاده از display و قرار دادن اون با none، کاری کردیم که اون نمایش داده نشه. بعد از اون با استفاده از کد زیر این داده‌ها رو به highcharts معرفی کردیم:

csv: document.getElementById('tsv').innerHTML

با استفاده از کد زیر رشته هایی که اعداد درصدی دارن رو تجزیه و تحلیل میکنن:

columns[1] = $.map(columns[1], function(value) {
  if (value.indexOf('%') === value.length - 1) {
      value = parseFloat(value);
  }
  return value;
});

با استفاده از کدهای زیر هم میتونین برندها و ورژنهای مربوط به هر برند رو از لابلای اون داده‌ها بیرون بکشید و اونا رو درون یک متغیر دیگه قرار بدین و مرتبشون کنید.

$.each(columns[0], function(i, name) {
  var brand, version;

  if (i > 0) {

      // Remove special edition notes
      name = name.split(' -')[0];

      // Split into brand and version
      version = name.match(/([0-9]+[\.0-9x]*)/);
      if (version) {
          version = version[0];
      }
      brand = name.replace(version, '');

      // Create the main data
      if (!brands[brand]) {
          brands[brand] = columns[1][i];
      } else {
          brands[brand] += columns[1][i];
      }

      // Create the version data
      if (version !== null) {
          if (!versions[brand]) {
              versions[brand] = [];
          }
          versions[brand].push(['v' + version, columns[1][i]]);
      }
  }

});

$.each(brands, function(name, y) {
  brandsData.push({
      name: name,
      y: y,
      drilldown: versions[name] ? name : null
  });
});
$.each(versions, function(key, value) {
  drilldownSeries.push({
      name: key,
      id: key,
      data: value
  });
});

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

var series = [{
  name: 'Brands',
  colorByPoint: true,
  data: brandsData
}];

میبینید که برای data مقدار brandeData که در کدهای قبلی تعریف شد، قرار داده شده است. در آخر هم با استفاده از کد زیر خاصیت drill down یا نمودار زیر مجموعه ای رو فعال میکنیم:

var drilldown = {
  series: drilldownSeries
}

خروجی بصورت زیر خواهد بود:drill down chart

 

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

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

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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