「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

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

カウントダウン プラグイン

FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd

no image

画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」

「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ

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

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

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

リストをインクリメント検索・ソートできる「List.js」

List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト

no image

テキストに装飾効果を付けるプラグイン

Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

no image

シンプルにポップアップを実装できる「PopBox」

「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!

Comment

Message

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

*

PAGE TOP ↑