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

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

: [続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」

「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。ダウンロードはこちらデモスクリプト

: ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード　デモスクリプ