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

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

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

関連記事

レスポンシブに対応したテーブルを実装できる「FooTable」

「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷

no image

ポップアップ・モーダル ウィンドウ プラグイン

ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers

no image

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

jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

no image

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

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

実装方法が選べるツールチップ用プラグイン「Smallipop」

Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします

Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ

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

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

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide

Comment

Message

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

*

PAGE TOP ↑