CSSのtransform:rotate()とjQueryを使ってシンプルな円グラフを作る

最近またCSSでいろんなものを作るのにはまっています。今回は、CSSで円グラフを作りました。transform:rotate() と overflow:hidden を使えばできるのではないかと考えたのが始めです。JSを使わなくてもいけるのですが、JSを使ったほうが円グラフの変更が楽なので、自動化できるところは自動化しました。対応ブラウザは、使っているCSSプロパティ的にはIE9以上ですが、実機確認はしていないので不具合等はあるかもしれません。モダンブラウザでの利用なら大丈夫です。

デモ

シンプルではありますが、こんな感じの円グラフを作ることができます。

ソースコード

.pie 
{
  position: absolute;
  left: 50%;
  width: 50%;
  height: 100%;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  overflow: hidden;
}
.pie:before 
{
  position: absolute;
  left: -100%;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
}
.pie.large 
{
  left: 0;
  width: 100%;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}
.pie.large:before 
{
  left: 0;
  width: 50%;
}
.pie.large:after 
{
  position: absolute;
  left: 50%;
  width: 50%;
  height: 100%;
  content: '';
}

// headにCSS追加用のstyle要素を作成
$('head').append('');

var $pie_chart_css = $('.pie-chart-css'),
    pie_size = $('.pie-chart').attr('data-px'),  // 円グラフのサイズ
    pie_size_half = pie_size / 2;                // 円グラフのサイズの半分

// パイのborder-radiusを設定
$pie_chart_css.append('.pie-chart { ' +
                      'position: relative; ' +
                      'width: ' + pie_size + 'px; ' +
                      'height: ' + pie_size + 'px; ' +
                      '}');
$pie_chart_css.append('.pie:before { ' +
                      'border-radius: ' + pie_size_half + 'px 0 0 ' + pie_size_half + 'px; ' +
                      '}' +
                      '.pie.large:after { ' +
                      'border-radius: 0 ' + pie_size_half + 'px ' + pie_size_half + 'px 0; ' + 
                      '}');

var start_deg = 0;  // パイのスタート角度

$('.pie').each(function(i)
{
  var $this = $(this),
      value = $this.attr('data-percentage'),    // パイのパーセンテージ
      value_deg = value * 3.6,                  // パイの大きさの角度
      pie_color = $this.attr('data-color'),     // パイの色
      selector = '',
      css_text = '';
  
  // パイが50%より大きい場合にクラスを追加
  if (value > 50) $this.addClass('large');
  
  // パイの数だけセレクタを+でつないでいく
  selector += '.pie';
  for (var j = 1; j <= i; ++j) selector += ' + .pie';
  
  // start_deg
  css_text += selector;
  css_text += ' { ' +
              '-webkit-transform: rotate(' + start_deg + 'deg); ' +
              '-moz-transform: rotate(' + start_deg + 'deg); ' +
              '-ms-transform: rotate(' + start_deg + 'deg); ' +
              'transform: rotate(' + start_deg + 'deg); } ';
  
  // value_deg
  css_text += selector;
  css_text += ':before { ' +
              '-webkit-transform: rotate(' + value_deg + 'deg); ' +
              '-moz-transform: rotate(' + value_deg + 'deg); ' +
              '-ms-transform: rotate(' + value_deg + 'deg); ' +
              'transform: rotate(' + value_deg + 'deg); } ';
  
  // pie_color
  css_text += selector + ':before, ' + selector + ':after {' +
              'background-color: ' + pie_color + '; }';
  
  // CSSをまとめて追加
  $pie_chart_css.append(css_text);
  
  // スタート角度を更新
  start_deg += value_deg;
});

使い方

使い方はとても簡単。HTMLをいじるだけで円グラフを変更できるようにしてあります。まず、.pie-chart と .pie でマークアップします。次に、 data-px を設定。これは縦横の大きさを表しています。data-percentage はパイの％、data-color はパイの色を指定しています。