「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',     // ツールチップのフォーマット
        },
    }

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

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

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

: クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を