「jqPlot」を使って円グラフを作成

Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード

最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更が伴うので、編集画面も」でした。

スクリプト

ベースとなるスタイルシート・スクリプト。excanvasは、IE8表示用です。

<script src="jquery.min.js" type="text/javascript"></script>
<link href= "jquery.jqplot.min.css" type="text/css" rel="stylesheet">
<script src="jquery.jqplot.min.js" type="text/javascript"></script>
<script src="excanvas.min.js" type="text/javascript"></script>

円グラフの表示用のpieRenderer

<script src="plugins/jqplot.pieRenderer.min.js" type="text/javascript"></script>

実装

<div id="div1033" style="height:400px; width:500px; margin:auto;"></div>

<script>
$(document).ready(function(){
    // データ
    data = [[
        ['United States', 12], ['France', 11], ['Russia', 9], ['United Kingdom', 7], ['Japan', 3], ['Belgium', 2], ['Others', 10]
    ]]

    // データラベル
    // データ配列の順にカンマ区切りで指定します。
    datalabel = [
        'United States 12', 'France 11', 'Russia 9', 'United Kingdom 7', 'Japan 3', 'Belgium 2', 'Others 10'
    ]

    // 円グラフ配色
    seriescolors = [
        "#4472A6", "#AA4644", "#89A550", "#715891", "#4199AF", "#D08949", "#616161"
    ]

    // オプション
    option = {
        title: 'Fields Medalists (1936 - 2010)',  // タイトル
        seriesDefaults: {
            renderer: jQuery.jqplot.PieRenderer,  // 円グラフ用プラグイン
            rendererOptions: {
                dataLabels: datalabel,            // データラベル
                showDataLabels: true,             // データラベル表示有無
                startAngle: -90                   // 円グラフ基線位置
            }
        },
        seriesColors: seriescolors,
        legend: { show:true, location: 'e' }      // 凡例
    }

    // 作成実行
    $.jqplot( 'div1033', data, option);
});
</script>
追加の要望
「開始位置を変えてほしい」「凡例やめて、項目と値をグラフ内に表示」
  • startAngle
    円グラフの開始位置を0時にしました。("基線位置"なる名称みたいですが、正式には何でしょうね?)デフォルトが3時の方向のようですので、-90(度)することで設定(回転)できます。
  • seriesColors
    パイの配色を配列で順に指定できます。(表示データ) 円グラフの配色は、Power Pointの"fruit salad"を参考にしました。
  • legend
    「凡例」を英語でlegend。show:falseと指定することで非表示にできます。

円グラフ サンプル
CakePHP経由でDBアクセスして表示するデモです。コードもそちらに。

追加オプション

円グラフ ツールチップ

<!-- 追加で、jqplot.highlighter.min.jsを読み込みます-->
<script src="plugins/jqplot.highlighter.min.js" type="text/javascript"></script>

オプションにhighlighterの設定を追加して下さい。

// オプション
    option = {
        highlighter: {
            show: true,                // ツールチップを表示する
            useAxesFormatters: false,  // 円グラフの場合falseに設定する
            formatString:'%s, %P',     // ツールチップのフォーマット
        },
    }

円グラフ ツールチップ表示 サンプル

  • このエントリーをはてなブックマークに追加

関連記事

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

selectボックスを華麗にしてくれる「Chosen」「Select2」

selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

no image

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

入力テキストの文字数をカウントしてくれる「Textchange」

Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し

no image

時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え

iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」

「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装

レスポンシブにも対応したカレンダーを表示する「Calendario.js」

Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready

開閉できるツリー構造を表現できる「jsTree」

「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

PAGE TOP ↑