月別アーカイブ: 2014年3月

【Plugin】 Javascriptでのグラフ表示

最近のサイトではグラフ表示を結構見かけます。
どうやっているのでしょうか、ちょっと気になります。
当面の予定として、棒グラフと円グラフを使うことになりそうなので、予習を兼ねてやってみます。

一応グラフ作成についての要望は以下の感じです。
 1.形式として棒グラフ・円グラフは使用したい。
 2.値に関してはアニメーションでの表示をしたい。

・・・いつも通り「出来ます」って言い切りましたが、新規で作るのは止めたほうが良さそうですね。
グラフの表示自体は「出来るよなぁ」ぐらいの感じですが、アニメーションを綺麗に表示する自信がないや・・・
よって今回は当サイトで初めての Plugin です。しかも、jQuery ではありません(笑)

■ Sample1(棒グラフ)

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>
        <script src="./Chart.js"></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

        --></style>

    </head>
    <body>

        <div id="disp_area">
            <canvas id="bar" height="450" width="600"></canvas>
        </div>

        <script type="text/javascript"><!--

            var barChartData = {
                labels : ['R', 'G', 'B', 'P'],
                datasets : [
                    {
                        fillColor : 'rgba(255, 200, 200 ,0.5)',
                        strokeColor : 'rgba(255, 0, 0, 1)',
                        data : [45, 35, 15, 5]
                    }
                ]
            }
            var myBar = new Chart(document.getElementById('bar').getContext('2d')).Bar(barChartData);

        --></script>
        
    </body>
</html>

sample1

■ Sample2(円グラフ)

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>
        <script src="./Chart.js"></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

        --></style>

    </head>
    <body>

        <div id="disp_area">
            <canvas id="pie" height="450" width="600"></canvas>
        </div>

        <script type="text/javascript"><!--

            var pieData = [
                {
                    value : 45,
                    color : '#ff0000'
                },
                {
                    value : 35,
                    color : '#00ff00'
                },
                {
                    value : 15,
                    color : '#0000ff'
                },
                {
                    value : 5,
                    color : '#ff00ff'
                }
            ];
            var myPie = new Chart(document.getElementById('pie').getContext('2d')).Pie(pieData);

        --></script>
        
    </body>
</html>

sample2

今回は今までとは異なり Plugin を使用しています。
今回使用した Plugin は「Chart.js
実際に仕事で使う事になりそうなので綺麗に表示できるものを選択しました(笑)

とりあえず、円グラフ・棒グラフをそれぞれ別の sample を作成しました。
入力している値はどちらも同じ値を設定しています。
 sapmple1 : 棒グラフ
 sapmple2 : 円グラフ

実際に見てみると棒グラフも円グラフもなかなか綺麗ですね。
表示時のアニメーションも非常にスムーズです。
オプションの設定でアニメーションの効果も変えたりできるようですね。
何より MIT ライセンスなので色々な場所で使用しても問題ないのが有難いですね。

ただし、良いことばかりではありません。
表示方法に HTML5 の canvas を使用するため、モダンブラウザでしか対応していません。
作成する Web サイトの表示ブラウザを確認しないと使えませんね。
また、円グラフに関してはラベルの設定も出来ないようです。
各ラベルは別に追加する必要がありそうですね。

・・・実はグラフの作成についての説明を受けた時点で聞いたイメージにもっとも近い Plugin がほかにありました。
その Plugin は「Highcharts.js」です。
ただ、こちらの Plugin は有料なんですよねぇ~。
どこかのお仕事で使うならまだしも、当サイトへの Sample への使用に有料版は残念ながら使えません。
そのため使用条件の調査もしていません。使えると面白いんですがねぇ。

また Google Chart Tools も対象候補でしたが API であるため対象からは外しました。
何より、棒グラフはともかく、円グラフに関してはアニメーション表示が出来ない様なんですよね・・・

まぁ、どれも非常に優れていることには違いないんですけどね。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

上下に動くアニメーション

今回は上下に動くアニメーション処理を表示についてです。
動く処理が入るとやっぱり目を引きますからね。
簡単に実装できるなら色々な場所で使用したいものではないでしょうか。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                function moveEasing(objDiv, easingType, flg) {
                    $(objDiv).animate(
                        {
                            top      : (30 * flg) + 'px'
                        },
                        {
                            duration : 1500,
                            easing   : easingType,
                            complete : function(){ moveEasing(objDiv, easingType, (flg * -1)); }
                        }
                    );
                }
                moveEasing($('#img01'), 'swing',  1);
                moveEasing($('#img02'), 'linear', 1);

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #disp_area div {
                margin           : 100px;
                position         : absolute;
            }

            #img01 {
            }
            #img02 {
                left             : 300px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">
            <div id="img01"><img src="./icon_jpeg01.jpg"></div>
            <div id="img02"><img src="./icon_jpeg02.jpg"></div>
        </div>

    </body>
</html>

sample

spmple では Image がアニメーションを行っているかと思います。
こういったものが含まれると含まれないでは「ちょっと違う」感が出る気がします。

ちなみに 2 種類のアニメーションを表示させていますが、動作の加速・減速が設定できます。
jQuery の標準では以下のものが実装されています。
 右側 : swing(標準)
 左側 : linear
      
標準(swing)のほうが若干動きが滑らかに見えますね。
この加速・減速については plugin を追加するともっと種類が増えるようです。
まぁ、とりあえずは標準で問題なさそうですけどね。

Webページも動的に動くページが増えてきていますし、今後ももっと増えていくのだと思います。
HTML5 も魅力的ですが、もうしばらくは jQuery が廃れることも無いでしょう。
まだまだ、jQuery と付き合っていけると良いなぁと云うところですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 2 人中 2 人がこの 投稿 は役に立ったと言っています。

タブパネルの初期化

今回はタブパネルを作成した場合のタブ表示についてです。
通常のタブ表示であれば結構簡単なのですが、全てのタブを非選択状態にするのは少し面倒です。
最初はパネルを表示しないタブについて、初期化する方法を試してみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                var checkFlg;
                $('.tab').click(function() {

                    // Select Check
                    checkFlg = false;
                    if ( $(this).hasClass('selected') ) {
                        checkFlg = true;
                    }

                    // All Hide
                    $('.panel').hide();
                    $('.tab').removeClass('selected');

                    // Select Show
                    if (checkFlg == false) {
                        $(this).next().show();
                        $(this).addClass('selected');
                    }

                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #disp_area .area{
                float            : left;
                margin           : 20px;
            }

            #disp_area .panel{
                display          : none;
            }

            .selected {
                color            : #0000ff;
                background-color : #ff0000;
            }

        --></style>


    </head>
    <body>

        <div id="disp_area">

            <div class="area">
                <span class="tab">TabName1 </span>
                <div class="panel">Panel Data 1.<br />Panel Data 1.<br />Panel Data 1.<br />Panel Data 1.<br />Panel Data 1.</div>
            </div>
            <div class="area">
                <span class="tab">TabName2 </span>
                <div class="panel">Panel Data 2.<br />Panel Data 2.<br />Panel Data 2.<br />Panel Data 2.<br />Panel Data 2.</div>
            </div>
            <div class="area">
                <span class="tab">TabName3 </span>
                <div class="panel">Panel Data 3.<br />Panel Data 3.<br />Panel Data 3.<br />Panel Data 3.<br />Panel Data 3.</div>
            </div>
            <div class="area">
                <span class="tab">TabName4 </span>
                <div class="panel">Panel Data 4.<br />Panel Data 4.<br />Panel Data 4.<br />Panel Data 4.<br />Panel Data 4.</div>
            </div>

        </div>

    </body>
</html>

sample

spmple では最初の段階ではパネルは表示されていません。
タブをクリックすることで、選択したタブの内容を表示しています。
選択中のタブを再度クリックした場合は、全てのパネルが表示されない状態になります。

すでに選択済みのタブかどうかが分かればいいだけなのですが、地味にめんどくさい処理です。
今度からはこの方法を使用していければいいなぁと思いますね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 0 人がこの 投稿 は役に立ったと言っています。

プリント用のダイアログ表示

今回はちょっとした小ネタ、Webページの印刷ダイアログを表示する処理です。

最近はWebページをプリントアウトしたいという要望はあまり無くなりました。
まぁ、スマホの影響なんですかねぇ・・・
とりあえず忘れないうちに書いておきます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $('#print_button').click(function(){
                     window.print();
                     return false;
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
        --></style>


    </head>
    <body>

        <div id="button_area">
            <button id="print_button">Now Print</button>
        </div>
        
        <h1>Print Page</h1>
        <div>
            <p>
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
                Print Data. Print Data. Print Data. Print Data. Print Data.<br />
            </p>
        </div>

    </body>
</html>

sample

「Now Print」と書かれた button を click することで印刷用ダイアログが表示されます。

特に使いみちがあるわけではないですし、印刷用に最適化したページの作成も必要なため、
この方法を知っても劇的に何か変わるわけではありません、知っているとちょっと便利という感じですね。
何よりそれほど拘りがなければブラウザの「印刷ボタン」がありますからねぇ。

ただ、CSS を使用して印刷用のレイアウトを作るのであれば知っておくとちょっとカッコいいかなと思います。
印刷用レイアウトを別ウィンドウで表示したとき、ダイアログが自動で表示されれば「おっ!」て思いませんか(笑)

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

リンク画像をマウスオーバー時に少し大きくして強調表示

今回はリンク画像を選択したときに、選択したリンク画像を少しだけ拡大表示をする処理です。
拡大表示は少しだけですが強調表示を行うにはいいのではないでしょうか。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function() {

                $("#button_area img").hover(
                    function() {
                        $(this).stop().animate({
                            'margin-top'  : '-15px',
                            'margin-left' : '-10px',
                            'width'       : '250px',
                            'height'      : '100px'
                        }, 100);
                    }, 
                    function() {
                        $(this).stop().animate({
                            'margin-top'  : '0px',
                            'margin-left' : '0px',
                            'width'       : '220px',
                            'height'      : '80px'
                        }, 400);
                    }
                );

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
        --></style>


    </head>
    <body>
        <div id="button_area">
            <a hreh="#"><img src="./icon_jpeg01.jpg"></a>
            <a hreh="#"><img src="./icon_jpeg02.jpg"></a>
            <a hreh="#"><img src="./icon_jpeg03.jpg"></a>
            <a hreh="#"><img src="./icon_jpeg04.jpg"></a>
            <a hreh="#"><img src="./icon_jpeg05.jpg"></a>
            <a hreh="#"><img src="./icon_jpeg07.jpg"></a>
        </div>

    </body>
</html>

sample

これで選択したマウスオーバー時の強調表示が出来ました。

実際にはそれほど画像が大きくなるわけではありません。
でも、画像サイズが変わると思ったよりインパクトがありますね。
気軽に見た目を変更できるのは効果的かもしれません。

ただ、jQuery としての問題は「実は CSS だけでも表現できる。」ことですね。
以前に「入力用のウォーターマーク」の時にも愚痴ってましたが、jQuery では無くても出来ることが増えてますよね・・・
まだまだ jQuery を使用しないと出来ないことはありますが、さびしい限りですねぇ・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。