ラベル JQuery の投稿を表示しています。 すべての投稿を表示
ラベル JQuery の投稿を表示しています。 すべての投稿を表示

2016年8月9日火曜日

Html2Canvasでwebページのスクリーンショットを取ろう

JavsScriptを使って、スクリーンショット及びファイル保存を行う方法について、調べてみました。
以下まとめておきます。

1、html2canvas
 html2canvasをつかって、画面キャプチャ及び、キャプチャした画面をダウンロードする
サンプルをつくってみました。

まず、次のサイトからhtml2canvas.jsを取得します。
https://github.com/niklasvh/html2canvas/releases


 (1) HTML
 スクリーンショットのimgをクリックしたら、プレビューダイアログを表示して、キャプチャした画面を表示して、ダウンロードの<a>タグを表示して、クリックしたら、ファイル保存するHTML
ファイルのサンプルです。
※svgをHTML内で使うときは、html2canvas.svg.jsも定義してください。

<!DOCTYPE html>
 <html lang="ja">
<head>
    <script src="scripts/html2canvas.js"></script>
    <script src="scripts/html2canvas.svg.js"></script>
    <script src="scripts/create_image.js"></script>
</head>

<body id="id_body">
     <div id="dv_color_set">
         <img id="img-printer" src="images/camera.png" title="スクリーンショット" onclick="OnPrintPreview()"/>
     </div>

     <div id="print_preview">
        <img id="screen_image" style="width:400px;height:400px;margin-top:0px;margin-left:50px">
        <a  id="download" href="#" download="test.png"></a>
        <button id="print_preview-cancel">Cancel</button>
    </div>
</body>
</html>

(2) JavaScript 
スクリプト(create_image.js)では、imgクリック時に関数(OnPrintPreview)を定義します。
OnPrintPreviewで、キャプチャ関数(screenshot）を実行します。
screenshotでhtml2canvasを使って画面キャプチャします。
 
function OnPrintPreview() {
    erase_screenshot("#id_body");
    screenshot("#id_body");
};

 function screenshot(selector) {
    var element = $(selector)[0];
    html2canvas(element, {
        onrendered: function (canvas) {
            var imgData = canvas.toDataURL();
            $('#screen_image')[0].src = imgData;
            $('#download')[0].href = imgData;
            $('#download')[0].innerHTML = "Download";
        }
    });
}

function erase_screenshot() {
    $('#screen_image')[0].src = "";
    $('#download')[0].href = "#";
    $('#download')[0].innerHTML = "";
}

※Downloadクリック時のイメージファイル保存は、IEではできませんでした（Chrome/Firefoxは可能でした）

２、jsPDF
まず、次のサイトからjspdf.jsを取得します。
https://parall.ax/products/jspdf

ライブラリ(jspdf.js)を使って画面キャプチャしたものをPDFファイルに保存させます。

HTML内で、script定義します。
スクリプト内関数screenshotを次のように変更します。
 
※ただし、jspdf.jsでは、addImage関数がないとエラーがでたので、jspdf.debug.jsを使用します。
また、jspdf.min.jsをつかうと、エラーとはならないのですが、PDF保存できませんでした。

<script src="scripts/jspdf/jspdf.debug.js"></script>
 <!--<script src="scripts/jspdf/jspdf.js"></script>-->
 <!--<script src="scripts/jspdf/jspdf.min.js"></script>-->

function screenshot(selector) {
    var element = $(selector)[0];
    html2canvas(element, {
        onrendered: function (canvas) {
        var canvasImage = canvas.toDataURL("image/jpeg");
        var pdf = new jsPDF();
        pdf.addImage(canvasImage, 'JPEG', 0, 0, 210, 210);
        pdf.save('C:\TEMP/sample.pdf');
        }
    });
}

【参考URL】
https://html2canvas.hertzen.com/ (英語)
http://bitwave.showcase-tv.com/html2canvas%e3%81%a7web%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%ae%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88%e3%82%92%e5%8f%96%e3%82%8d%e3%81%861/
http://www.petitmonte.com/javascript/html2canvas.html
http://zentoo.hatenablog.com/entry/2014/02/11/161456
http://blog.k-kansei.com/?p=1319

投稿者 時刻: 0 件のコメント:
ラベル: , , , ,

2016年6月15日水曜日

【HTML5/CSS】pタグのtitle属性がipadで表示されない対応方法（ツールチップ)

pタグでtitleを設定すると、パソコンでは、titleが表示されます。
（ツールチップ）
しかし、ipadではtitleが表示されません。
どうやら、ipadだとtitle表示すると、タッチしているので、問題なのだそうです。

そこで、タッチ時(mouseover)に、divタグをbodyに追加して、擬似ツールチップ表示します。

その例を紹介します。

１、HTMLとJavaScriptでタイトル設定






(1) HTML
divタグで、id =cpair_details_td1を定義する

　<div id="cpair_details_td1"></div>
               
(2) Javascript（Typescript)
jQueryで、、id =cpair_details_td1にpタグを追加する。
tittleを定義して、ツールチップ表示する

   　 $('#cpair_details_td1').append($('<p class="td_result1" title="総決済損益額">').text("総トレード損益"));


２、mouseoverとdivタグ追加
id=td_result1のmousemoveイベントとmouseoutイベントを定義して、
ipadでタッチしたときの処理定義する。

id_bodyはbody要素のidです。
body要素にdiv要素(id=ptips）を追加して、ツールチップ表示します。
InfoBackgroundはtitle表示時のシステムの持っている背景色です。

               $(".td_result1")
                    .mouseover(function (e) {
                        var str = $(this)[0].title;
                        $("#id_body").append("<div id='ptips'>" + str + "</div>");

                        $("#ptips")
                            .css("position", "absolute")
                            .css("background", "InfoBackground")
                            .css("top", (e.pageY) + 15 + "px")
                            .css("left", (e.pageX) + 15 + "px")
                            .css("display", "none")
                            .css("filter", "alpha(opacity = 85) ")
                            .css("opacity", "0.85")
                            .fadeIn("fast")
                            ;
                    }).mouseout(function () {
                        $("#ptips").remove();
                    });


投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,

2016年4月27日水曜日

【HTML5/Javaccript/css】input要素でカーソルを外す方法

input要素にreadonly設定すると、入力不可になります。
ただし、これでは、フォーカル取得可能ですので、カーソルが表示されます。
そこで、これを防止する手段を実装してみました。

以下のサイトのように結構皆さん苦労しているようです。
http://qiita.com/kokoe/items/9ff51d1eb990d8238e83
http://oshiete.goo.ne.jp/qa/257482.html


1、readonly属性の場合 
下の画像のように04の前に入力カーソル（入力位置表示）が表示されます。

ソースコードは以下のようにした場合です。

【HTML5】
<input class="datepic" type="text" id="from_date" readonly>

【CSS】
.datepic {
    border:1px solid white ;     /* 枠線の装飾 */
    border-radius: 3px;         /* CSS3 */
    -moz-border-radius: 3px;    /* Firefox */
    -webkit-border-radius: 3px; /* Safari,Chrome */
    height:20px;

     vertical-align:middle;
    text-align:center;
    cursor:auto;
}

２、disabled属性の場合  

下のコードのように記述することで、入力カーソルが表示されなくなります（下画像）。


ソースコードは以下のようにした場合です。
赤字のように、readonlyをdisabledに変更します。
CSSで背景(background-color)と文字色(color)を設定します。

【HTML5】
 <input class="datepic" type="text" id="from_date" disabled>

 【CSS】
.datepic {
    border:1px solid white ;     /* 枠線の装飾 */
    border-radius: 3px;         /* CSS3 */
    -moz-border-radius: 3px;    /* Firefox */
    -webkit-border-radius: 3px; /* Safari,Chrome */
    height:20px;

     vertical-align:middle;
    text-align:center;

     color:white;
    background-color:black;
    cursor:auto;
} 

投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,

2016年3月28日月曜日

【TypeScript/JavaScript】ColorPickerを実装する

 参考URLにあるColorPickerの実装を試してみました。

--------------------------------------------------------------

Microsoft Office 2010のような色選択コントロールを実装します。

【実装コード】
１、jQuery (v1.7 or greater), jQuery UI (v1.8 or greater)をダウンロードして、実装する
HTMLにコード追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>

２、使うCSSを記述HTMLにコード追加

 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" />
<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css" />
３、inputタブに、colorpickerの実装
HTMLにコード追加
<div style="width:128px;">
   <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
   <div class="evo-colorind" style="background-color:#8db3e2"></div>
</div>

<script type="text/javascript">
   $(document).ready(function() {
       $("#mycolor").colorpicker();
   });
</script>


４、オプション設定
(1) 初期色設定
$("#mycolor").colorpicker({
    color: "#ffffff"
});
(2) ColorPickerのパレットデフォルト表示
$("#mycolor").colorpicker({
    defaultPalette: 'web'
});

(3) プレート内で色クリック及びマウスオーバー時の情報を下段に表示しない
$("#mycolor").colorpicker({
    displayIndicator: false
});

(4) ボタン非表示
$("#mycolor").colorpicker({
    hideButton: true
});

 (5) パレットはボタンのみで表示
このオプションをしないと、inputのfocusを受けた時にパレット表示される。
デフォルトは、inputフォーカス時とボタンクリック時に表示されます。
$('#mycolor').colorpicker({showOn:'button'});

 (6) パレット内表示文字変更
$("#mycolor").colorpicker({
   strings: "テーマの色,標準の色,Webスタイル,Theme Colors,パレット戻る,履歴,No history yet."
});
(7) パレットに透明色("#0000ffff")選択可能にする
$("#mycolor").colorpicker({
    transparentColor: true
});

 ５、イベント処理
(1) 色選択時
$("#mycolor").on("change.color", function(event, color){
    $("#title").attr("style", "background-color:" + color);
})

(2) パレット内のカラーボックスマウスオーバー時
$("#mycolor").on("mouseover.color", function(event, color){
    $('#title').attr("style", "background-color:" + color);
})

６、メソッド
(1) 色クリア
$("#mycolor").colorpicker("clear");

(2) グレーアウト（パレット表示できないようにする）
$('#mycolor').colorpicker("disable");
反対(パレット表示可能）の場合
$("#mycolor").colorpicker("enable");

(3) パレットの選択色設定・取得
var color = $("#mycolor").colorpicker("val");
$("#mycolor").colorpicker("val", "#d0d0d0");

(4) パレット表示（ボタンやinputから表示以外の方法）
$("#mycolor").colorpicker("showPalette");

(5) パレット非表示（ボタンやinputから表示以外の方法）
$("#mycolor").colorpicker("hidePalette");


７、カラーパレットテーマ（デザイン色）変更
 jQuery UI widgetと同じテーマで変更できます
独自のテーマ作成もきます
http://jqueryui.com/themeroller/#!themeGallery=undefined



<link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="all">
の"ui-lightness"を変更します。

またはプログラム内で行う場合は、以下のような感じで行います。
        var theme = "ui-darkness";
        $('#jquiCSS').attr('href','http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/'+ theme +'/jquery-ui.css');
        $('.css').removeClass('sel');
        $(this).addClass('sel');


８、実装例

    <div class="demoPanel" style="width:130px">
        <input id="cpButton" value="#92cddc" />
    </div>
    <script type="text/javascript">
        $('#cpButton').colorpicker({ showOn: 'button' });

        $("#cpButton").colorpicker({
            strings: "テーマの色,標準の色,Webスタイル,Theme Colors,パレット戻る,履歴,No history yet."
        });
        $("#cpButton").colorpicker({
            displayIndicator: false
        });
        $("#cpButton").colorpicker({
            color: "#ffffff"
        });
        var theme = "ui-darkness";
        $('#jquiCSS').attr('href', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/' + theme + '/jquery-ui.css');
        $('.css').removeClass('sel');
        $(this).addClass('sel');
    </script>

９、実装例をTypeScriptで実装
JavaScriptファイル(test.js)を作成して、8で記載したコードを追加する
function SetColorPicker() {
    $('#cpButton').colorpicker({ showOn: 'button' });
    $("#cpButton").colorpicker({
        strings: "テーマの色,標準の色,Webスタイル,Theme Colors,パレット戻る,履歴,No history yet."
    });
    $("#cpButton").colorpicker({
        displayIndicator: false
    });
    $("#cpButton").colorpicker({
        color: "#ffffff"
    });
    var theme = "ui-darkness";
    $('#jquiCSS').attr('href', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/' + theme + '/jquery-ui.css');
    $('.css').removeClass('sel');
    $(this).addClass('sel');
}

 TypeScriptファイル(app.ts)で以下のコードを追加する 。
（declare宣言（アンビエント）で、JavaScriptで定義した関数を宣言する）
 declare function SetColorPicker();
$(document.body).ready(function () {
    SetColorPicker();
}


【参考URL】
http://www.codeproject.com/Articles/452401/ColorPicker-a-jQuery-UI-Widget
投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,

【Javascript】使えそうで、覚えておくと良い関数など

指定したURLへ移動
location.hrefプロパティを手動で設定し、指定したURLにジャンプさせることができます。 
window.location.href = "http://www.google.co.jp/";


ページ内の指定したアンカー名へ移動
移動先となる場所には、<a name="アンカー名"></a>のように、a要素のname属性にアンカー名を指定します。
例えば、
ページの先頭に<a name="pagetop"></a>と記述しておくと、ページの要所要所で
<a href="#" onClick="location.hash='pagetop'; return false;">先頭へ</a>
と記述したリンクをクリックすれば、ページの先頭へジャンプさせることができます。

新しいドキュメントを読み込む
 assignメソッドは、新しいドキュメントを読み込み、現在のlocationを変更します。 第1引数URLには、新しいドキュメントのURLを指定します。
location.assign("http://www.google.co.jp/"); 

 ページの履歴を残さずにジャンプ
replaceメソッドは、現在のURLを指定したURLに置換します。
このreplaceメソッドで、現在のURLを任意のURLに置換すれば、ページの履歴を残さずに任意のページへ移動させることも可能です。 ブラウザの［戻るボタン］をクリックしても、前に閲覧していたページに戻ることはできません。
<input type="button" value="ジャンプ" onclick="location.replace('http://www.google.co.jp/');" />


ノード内のHTML要素の取得・設定
エレメント.innerHTML = HTML文
対象ノード内のHTML文を取得・設定します。
 HTMLタグを含めずにプレーンテキストのみ取得・設定したい場合は、innerText／textContentを使用します。
 document.getElementById("message").innerHTML="<p>"+str+"、"+username+"さん<\/p>";



【JavaScript文法】
throw文
例外エラーを発生させ、キーワードをcatch文に渡す
 try ... catch...finally文で処理できるエラー条件を生成します。 式には任意の式を指定します。
        try{
            try{
                if(x == 0) throw "x は 0 と等しい";
                else throw "x は 0 と等しくない";
            }
            catch(e){
                if(e=="x は 0 と等しい") return(e); /* エラーメッセージを返す */
                else throw e;
            }
        }
        catch(e){
            return(e); /* エラーメッセージを返す */
        }

 try...catch...finally文
 エラーをキャッチしてエラー処理を実装する
 try {
　　[ try文 ]
} catch ( 変数名 ) {
　　[ catch文 ]
} finally {
　　[ finally文 ]
}

【参考URL】





http://phpjavascriptroom.com/?t=js

投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,

2016年3月18日金曜日

【TypeScript/JavaScript】d3.jsでグラフを作ろう（棒グラフ）

TypeScript及びJavaScriptを使って、グラフ作成する方法で、d3.jsを使う方法があります。
前回に続いて、棒グラフのつくり方を纏めてみました。

(1)データ
キー（label/value)と値(labelに対する値/valueに対する値)に値を設定したJsonデータを作成します。

            var res = [
                { label: "利益", value:  7943546 }
                , { label: "損失", value: 19508020 }
            ];


(2)線データ（ステップライン）の作成
idは、HTMLファイルdivタグ要素とします。
idにｓｖｇ要素を追加します。
widthは幅、marginは余白、heightは高さを表します。
svg要素を作成して、g要素を追加します。

                var svg = d3.select(id).append("svg")
                    .attr({
                        width: width,
                        height: height
                    })
                    .append("g")
                    .attr("transform", "translate(" + 200 + "," + 100 + ")");
taransformは位置を指定します。

棒(四角=rect)を定義します。
rectにクラス定義(bar)をして、CSSで色など属性を与えます。
               var rec = this.svg.selectAll(".bar")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "bar")
                    .attr("x", function (d) { return x(d.label); })
                    .attr("width", x.rangeBand())
                    .attr("style", "fill:" + barcolor)
                    .attr("style", "stroke:black")
                    .attr("y", function (d) { return height; })
                    .attr("height", function (d) {
                        return height - y(d.value);
                    })
                    .append("title")
                    .text(function (d) { return d.value.toLocaleString(); })
                    ;
                this.svg.selectAll("rect").attr("height", 0);


svg要素に棒グラフアニメーション(下から上に伸びる）定義します。
2秒間アニメーションを設定します。(transiton,durationを使用する)
                this.svg.selectAll("rect")
                    .transition().duration(2000)
                    .delay(function (d, i) {
                        return i * 300;
                    })
                    .attr("y", function (d) {
                        return y(d.value);
                    })
                    .attr("height", function (d) {
                        return height - y(d.value);
                    });

(2) 軸
d3.scale.ordinal()　・・・domain の配列の n 番目の値が、 range の配列の n 番目の値に対応
  ※こちらのサイトを一読すると理解しやすいです。
　　http://blog.livedoor.jp/kamikaze_cyclone/archives/34197135.html
d3.scale.linear()　・・・　リニアスケールを設定
を使って、スケール定義します。

スケール定義することで、height/width内にデータが収まるように、スケールできるようになります。
            var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.3);
            var y = d3.scale.linear().range([height, 0]);

 d3.svg.axis()を使って、軸を作成して、スケールとリンクさせます。
ticksで刻みも定義します。

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");
            var yAxis = d3.svg.axis()
                .ticks(5) // 軸のチックの数。
                .scale(y)
                .orient("left"); 

x,yの範囲を定義します。

           x.domain(data.map(function (d) { return d.label; }));
            var dmax = d3.max(data, function (d) { return d.value; });
            var no = String(dmax).length;
            var unit = Math.pow(10, no - 1);
            var res = Math.floor(dmax / unit);
            dmax = (res + 1) * unit;
            y.domain([0, dmax]);
            y.range([height, 0]);

X軸、y軸を追加します。
 classはaxisにして、CSSファイルに軸の属性定義を行います。
            this.svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
            this.svg.append("g")
                .attr("class", "axis")
                .call(yAxis);

横方向のグリッド間隔を自動生成します。
attrにて、属性定義を行います。
            var ts = height / (res + 1);
            var rangeY = d3.range(0, height, ts);
            this.svg.selectAll("line.y")
                .data(rangeY)
                .enter()
                .append("line")
                .attr("x1", 0).attr("y1", function (d, i) {
                    return d;
                })
                .attr("x2", width).attr("y2", function (d, i) { return d; });

             this.svg.selectAll("line")
                .attr("stroke", "black")
                .attr("stroke-width", 1)
                .attr("stroke-dasharray", "1, 3")
                .attr("shape-rendering", "crispEdges");

(4) 情報表示 
値棒グラフ上表示します。
クラスはbarvalとして、属性をCSSファイルで定義します。

            this.svg.selectAll(".barval")
                .data(data)
                .enter().append("text")
                .attr("class", "barval")
                .attr("x", function (d) {
                    return x(d.label) + 5;
                })
                .attr("y", function (d) {
                    return y(d.value) - 2;
                })
                .text(function (d) {
                    return d.value.toLocaleString();
                });
on("mouseover")で、円弧をbrawon色にして、infoクラス定義したg要素を表示させて、
そのg要素に情報表示させます。

on("mouseout")で色をbarcolorで定義した色に戻します。
            this.svg.selectAll("rect")
                .on("mouseover", function (d, i) {
                    d3.select(this).attr("style", "cursor:pointer");
                    d3.select(this).attr("style", "fill:brown");
                    d3.select(this).attr("style", "stroke:black");                
　　　　　　　.on("mouseout", function (d, i) {
                    var color = barcolor;
                    var rec = d3.select(id).select("svg");
                    d3.select(this).attr("style", "fill:" + color);
                    d3.select(this).attr("style", "stroke:black");
                });





投稿者 時刻: 0 件のコメント:
ラベル: , , , , , ,

2016年3月16日水曜日

【TypeScript/JavaScript】d3.jsでグラフを作ろう（円グラフ）

TypeScript及びJavaScriptを使って、グラフ作成する方法で、d3.jsを使う方法があります。
前回に続いて、円グラフのつくり方を纏めてみました。


(1)データ
キー（label/value)と値(labelに対する値/valueに対する値)に値を設定したJsonデータを作成します。

            res = [
                { label: "USD/JPY", value: 87 }
                , { label: "GBP/JPY", value: 6 }
                , { label: "EUR/USD", value: 3 }
                , { label: "CHF/JPY", value: 2 }
                , { label: "AUD/JPY", value: 1 }
                , { label: "EUR/JPY", value: 1 }
            ];

※Jsonデータの詳細は以下サイトに詳しく書かれています。
 http://hakuhin.jp/js/json.html

(2)線データ（ステップライン）の作成
idは、HTMLファイルdivタグ要素とします。
idにｓｖｇ要素を追加します。
widthは幅、marginは余白、heightは高さを表します。
svg要素を作成して、g要素を追加します。

                var svg = d3.select(id).append("svg")
                    .attr({
                        width: width,
                        height: height
                    })
                    .append("g")
                    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
taransformは位置を指定します。

円弧を定義します。
            var pie = d3.layout.pie()
                .sort(null)
                .value(function (d: any) { return d.value; });

円弧の外径と内径を定義します。
            var arc = d3.svg.arc()
                .outerRadius(radius - 10)
                .innerRadius(0);

データバインドして、円弧を作成します。
classはarcとして、CSSファイルにarcの属性定義を行います。
g要素に円弧要素(arc)を設定します。

            var g = this.svg.selectAll("path")
                .data(pie(datas))
                .enter()
                .append("g")
                .attr("class", "arc");




            g.append("path")
                .attr("d", arc);

colorArrに円弧色を定義して、g要素に色を設定します。
colorArr.push("#00000"); などとして、円弧分設定します。

            g.attr("stroke", "black")   
                .style({
                    fill: function (d, i) {
                        return colorArr[i];
                    }
                });

svg要素に円弧アニメーション定義します。
svgにdataを使って円弧要素を作成します。
2秒で透過アニメーションを設定します。(transiton,durationを使用する)

                this.svg.selectAll("path")
                    .transition()   // トランジション開始
                    .duration(2000) // 1秒間でアニメーションさせる
                    .attrTween("d", function (d) {    // 指定した範囲で値を変化させアニメーションさせる
                        var interpolate = d3.interpolate(
                            { startAngle: 0, endAngle: 0 },   // 各円グラフの開始角度
                            { startAngle: d.startAngle, endAngle: d.endAngle }    // 各円グラフの終了角度
                        );
                        return function (t) {
                            return arc(interpolate(t)); // 時間に応じて処理
                        };
                    });

(3) 円弧にデータ表示
円弧にデータ(テキスト)させます。
尚、データ10以下は表示させないようにします。
            g.append("text")
                .attr("transform", function (d: any) { return "translate(" + D3Chart.arc.centroid(d) + ")"; })
                .attr("font-size", "10")
                .attr("font-family", "sans-serif")
                .style("text-anchor", "middle")
                .style("fill", "#ffffff")
                .text(function (d: any) { if (d.data.value < 10) return ""; return d.data.value; });

(4) 情報表示 


on("mouseover")で、円弧をbrawon色にして、infoクラス定義したg要素を表示させて、
そのg要素に情報表示させます。

var mousePos = d3.mouse(this);
にて、円弧の位置が取得できますので、情報g要素をその位置に表示させます。

on("mouseout")で表示した情報g要素を非表示させます。

            this.svg.selectAll("path")
                .on("mouseover", function (d, i) {
                    d3.select(this).attr("style", "cursor:pointer");
                    d3.select(this).attr("style", "fill:brown");
                    var lab = datas[i].label;
                    var val = datas[i].value + "%";
                    var pie = d3.select(id).select("svg");
                    var info = pie.append("g")
                        .attr("class", "info")
                        .attr("x", 0)
                        .attr("width", 70)
                        .attr("height", 62)
                        .style("fill", function (d) {
                            return d;
                        });
                    var width = d3.select(id).select("svg").attr("width");
                    var height = d3.select(id).select("svg").attr("height");
                    var mousePos = d3.mouse(this);
                    var info_x = mousePos[0] ;
                    var info_y = mousePos[1];
                    info.append("rect")
                        .attr("x", info_x)
                        .attr("y", info_y)
                        .attr("width", 100)
                        .attr("height", 50)
                        .attr("stroke", "black")
                        .attr("fill", "white");
                    info.append("text")
                        .attr("x", info_x +5)
                        .attr("y", info_y +20 )
                        .attr("font-family", "selif")
                        .style("fill", "black")
                        .text(lab);
                    info.append("text")
                        .attr("x", info_x +5)
                        .attr("y", info_y + 40 )
                        .attr("font-family", "selif")
                        .style("fill", "black")
                        .text(val);
                })
                .on("mouseout", function (d, i) {
                    var color = colorArr[i];
                    var pie = d3.select(id).select("svg");
                    d3.select(this).attr("style", "fill:" + color);
                    pie.select('g.info').remove();   
                });


(4) 凡例作成
円弧データ説明(凡例)を作成します。
            var legend = this.svg.selectAll(".legend")
                .data(colorArr)
                .enter().append("g")
                .attr("class", "legend")
                .attr("transform", function (d, i) {
                    return "translate(120," + i * 20 + ")";
                });

凡例の色を描画します。
            legend.append("rect")
                .attr("x", 0)
                .attr("width", 18)
                .attr("height", 18)
                .style("fill", function (d) {
                    return d;
                });

凡例の説明を描画します。
            legend.append("text")
                .attr("x", 20)
                .attr("y", 9)
                .attr("dy", ".35em")  // width
                .attr("font-family", "selif")
                .style("text-anchor", "start")
                .style("fill", "#ffffff")
                .text(function (d, i) {
                    return datas[i].label;
                });

投稿者 時刻: 0 件のコメント:
ラベル: , , , , , ,

2016年3月14日月曜日

【TypeScript/JavaScript】d3.jsでグラフを作ろう（線フラフ）

TypeScript及びJavaScriptを使って、グラフ作成する方法で、d3.jsを使う方法があります。
ここでは、d3.jsの使い方及び、折れ線グラフ（ステップライングラフ）のつくり方を纏めてみました。

１、d3.jsについて
D3.jsはデータに基づいてDocumentを操作するためのJavaScritpライブラリで、SVG(※)を作成します。
D3はHTML/SVG/CSSを使って、Googleアナリティクスみたいなグラフを作成することができます。
マウスオーバーとかクリックで任意のデータをDOMと結合させ、データ表示することもできます。
（Data-Driven な DOM 操作手順(頭のDを取って、D3というみたいです)）。

※SVG（スケーラブル・ベクター・グラフィックス）
SVG はテキストベースの画像フォーマットです。
簡単なマークアップコードの記述だけで指定でき、SVG コードを直接 HTML ドキュメント内に記述することもできます。
 実際に、小さな青い円を表示する場合、次のように記載すれば、ブラウザで表示できます。
<svg width="50" height="50">
   <circle cx="25" cy="25" r="22"
   fill="blue" stroke="gray" stroke-width="2"/>
</svg>
d3.jsの特徴：
・商用利用可能
・豊富なサンプル、ドキュメント
・インタラクティブなグラフの作成
・アニメーション
・jQueryライクなセレクタ(ドットによるメソッドチェイン)
 ⇒メソッドチェインが可能

２、TypeScriptでのd3.jsを使う
Visual Studio 2015を使って、TypeScript + d3.jsを使用します。
D3ライブラリとD3定義ファイル(d3.d.ts)をダウンロードして、VisualStudioに追加する。

(1) D3のライブラリ
 D3公式サイトからダウンロード。

(2) D3の型定義ファイル
 DefinitelyTypedからD3の型定義ファイルd3.d.tsをダウンロード。
 このファイルがあるとVisual Studio上でD3を使用するときにメソッド名等々を補完してくれます。

(3) Visual Studioでプロジェクトの作成及び、D3ライブラリの配置
 TypeScriptのプロジェクトを作成し、D3のライブラリを配置します。


d3フォルダを作成(例:project-folder)して、d3.jsを保存します。
（d3.d.tsも同様）
【d3ファイル】 
・project-folder/d3/d3.js
・project-folder/d3/d3.min.js （必要な場合）
 ※d3.jsファイルのサイズを小さくし、読み込み時間を速くするために通常版から空白文字を除去したバージョンです。どちらを使っても機能に変わりありません。 
【d3定義ファイル】 
・project-folder/d3/d3.d.ts
【HTMLファイル】 
  project-folder/d3/index.html


<!DOCTYPE html>
   <html lang="en">
      <head>
         <meta charset="utf-8">
         <title>D3 Test</title>
         <script type="text/javascript" src="d3/d3.v3.js"></script>
      </head>
      <body>
         <script type="text/javascript">
            // ここに D3 スクリプトを書きます
         </script>
      </body>
</html>
 
(4) グラフを作成
　あとは、body内に、d3を使ってグラフを記述します。
(1)～(4)までの手順は、以下のサイトを参照して、実行してみると良いです。
https://xnn.sakura.ne.jp/blog/2015/03/using_d3-js_with_typescript/

３、折れ線グラフのつくり方
 下のステップライングラフのつくり方について説明いたします。

ここでは、以下について説明します。
・データの扱い方
・線データ（ステップライン）の作成
・アニメーション
・イベント処理（マウスオン）
・情報表示 ・軸（スケール）

(1)データ
Xに日付、Yに値を設定したデータを作成します。
日付はDate型に変換します。
※Date型にしないと、グラフがうまく作れなかったので注意

            var parseDate = d3.time.format('%Y/%m/%d').parse;
            var data = [
                { date: "2015/03/01", value: -2518914 },
                { date: "2015/04/01", value: -2182314 },
                { date: "2015/05/01", value: -2019494 },
                { date: "2015/06/01", value: -1701534 },
                { date: "2015/07/01", value: -1548854 },
                { date: "2015/08/01", value: -1437104 },
                { date: "2015/09/01", value: -138463 },
                { date: "2015/10/01", value: 1000587 },
                { date: "2015/11/01", value: 1000587 },
                { date: "2015/12/01", value: 1000587 }
            ];
            data.forEach(function (d : any) {
                d.date = parseDate(d.date);
                d.value = d.value;
            });

(2)線データ（ステップライン）の作成
idは、HTMLファイルdivタグ要素とします。
idにｓｖｇ要素を追加します。
widthは幅、marginは余白、heightは高さを表します。
            var svg = d3.select(id).append('svg')
                .attr('width', width + margin.left + margin.right)
                .attr('height', height + margin.top + margin.bottom)
                .append('g')
                .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


svgにdataを使って線要素を作成します。
classはlineとして、CSSファイルにlineの属性定義を行います。
1秒で透過アニメーションを設定します。(transiton,durationを使用する)
            svg.append('path')
                .datum(data)
                .attr('class', 'line' )
                .attr('d', line0)
                .attr('opacity', '0')
                .transition()
                .duration(1000)
                .attr('opacity', '2.0');

線要素に点列を追加します。
classはcircle0にして、CSSファイルにlineの属性定義を行います。
on('mouseover',)で、#tooltipに情報表示します。
on("mouseout")で、情報表示を非表示にします。
 0.1秒ごとに、透過アニメーションを設定します。(transiton,durationを使用する)
            svg.selectAll('circle.t')
                    .data(data)
                    .enter()
                    .append('circle')
                    .attr('cx', function (d, i) {
                        return x(d.date);
                    })
                    .attr('cy', function (d, i) { return y0(d.value); })
                    .attr('r', 0)
                    .attr('class', 'circle0')
                    .style('stroke', 'black')
                    .on('mouseover', function (d) {
                        $('#tooltip').fadeIn();
                        $('#date').text(d.date);
                        $('#value').text(d.value);
                    })
                    .on("mouseout", function (d, i) {
                        $('#tooltip').fadeOut();
                    })
                    .transition()
                    .delay(function (d, i) {
                        return (i + 1) * 100;
                    })
                    .duration(1000)
                    .attr('r', 6);

線データを定義します（interpolateにて、ステップライン設定します）
            var line0 = d3.svg.line()
                .x(function (d: any) { return x(d.date); })
                .y(function (d: any) { return y0(d.value); });
            line0.interpolate("step-after");

 (3) スケール・軸
 d3.time.scale()を使って、スケール定義します。
スケール定義することで、height/width内にデータが収まるように、スケールできるようになります。
 d3.svg.axis()を使って、軸を作成して、スケールとリンクさせます。
            var x = d3.time.scale() .range([0, width]);
            var y0 = d3.scale.linear().range([height, 0]);  

 d3.svg.axis()を使って、軸を作成して、スケールとリンクさせます。
            var xAxis = d3.svg.axis()
                .scale(x)
                .orient('bottom')
                .ticks(d3.time.months, 1)
                .tickFormat(d3.time.format('%Y/%m/%d'));
            var yAxisLeft = d3.svg.axis()
                .scale(y0)
                .orient("left")
                .innerTickSize(-width)
                .outerTickSize(0)
                .tickPadding(10);
            x.domain(d3.extent(data, function (d) { return d.date; })).nice();
            y0.domain([d3.min(data, function (d) { return Math.min(d.value); }), d3.max(data, function (d) { return Math.max(d.value); })]).nice();
nice()を使うと、値の範囲を丁度良い幅に設定してくれます。

X軸、y軸を追加します。
 classはaxisにして、CSSファイルに軸の属性定義を行います。
            svg.append('g')
                .attr('class', 'axis')
                .attr('transform', 'translate(0,' + height + ')')
                .attr('fill', 'rgba(0,0,0,0.85)')
                .call(xAxis);
            svg.append('g')
                .attr('class', 'axis')
                .attr('fill', 'rgba(255,0,0,0.85)')
                .call(yAxisLeft);

横方向のグリッド間隔を自動生成します。
 classはglineにして、CSSファイルにグリッド線の属性定義を行います。
            var rangeY = d3.range(0, height, 50);
            svg.selectAll('line')
                .attr('class', 'gline')
                .attr("stroke-width", 1)
                .attr("stroke-dasharray", "1, 3")
                .attr("shape-rendering", "crispEdges");

塗り潰し領域を生成します。
 classはlareaにして、CSSファイルにグリッド線の属性定義を行います。
            var area = d3.svg.area()
                .x(function (d : any, i) { return x(d.date) })
                .y0(function (d: any, i) { return y0(d.value); })
                .y1(function (d, i) { return height; });
            area.interpolate("step-after");
            svg.append("path")
                .attr("d", area(data))
                .attr('class', 'larea')
                .attr("opacity", 0.2);


※「円グラフ」「棒グラフ」については、 別の投稿にて、説明いたします。

(4) 情報表示 
tooltipというidにて、div要素を作成します。
(2)で説明したように、on('mouseover',)で点列上にマウスがのった時にtooltipを表示させて、情報表示します。
            var tag: string =
                "<div id='tooltip'>" +
                "<p> <strong id='date'> </strong></p>" +
                "<p>値: <span id='value'> </span></p>" +
                "</div>";
            $(id).append(tag);

【参考URL】
http://ja.d3js.info/alignedleft/tutorials/d3/ 
http://tech-sketch.github.io/graph-d3js/
http://blog.okazuki.jp/entry/2014/02/08/230843
http://blog.okazuki.jp/entry/2014/02/09/161540
http://blog.okazuki.jp/entry/2014/02/09/212419
⇒プログラミングの一連の流れを書いてあるサイト

https://xnn.sakura.ne.jp/blog/2015/03/using_d3-js_with_typescript/
 ⇒TypeScriptを使ったd3.jsについて詳しく書かれているサイト

 https://d3js.org/
⇒公式サイト

http://dataisfun.org/series/d3-tutorial-elemental
http://ja.d3js.node.ws/ 
https://github.com/mbostock/d3/wiki/Gallery
⇒サンプル（こんなことができるよ、って）

http://dotinstall.com/lessons/basic_d3js
http://dotinstall.com/lessons/basic_svg
 ⇒最初は、「ドットインストール」で動画をみて学習するといいと思います。

http://www.openspc2.org/reibun/D3.js/
 ⇒細かい説明が書かれているサイト




投稿者 時刻: 0 件のコメント:
ラベル: , , , , , ,

2016年2月22日月曜日

【Javascript】ホームページ作成につかえる、JQuery+Javascript+Cssサンプルコード

ホームページ作成時に、使えるコードを紹介します。

１、buttonやimageっを使わずに、クリックしたら、リンクしたサイトへ飛ばす
 (1) 説明
  ・<div>タグでboxを作成する
  ・<p>タグで文章を記載して、<a>タグでリンク先を指定する。
  ・<strong>で強調文字とする
 (2) コード
 <div style="margin-top:65px;margin-left:1170px;position:absolute;background-color:white; border: outset;  width:200px;height:30px;border-color:black;border-radius:5px">
     <p style="margin-top:4px;margin-left:14px;">
         <a href="http://www.yahoo.co.jp/" style="text-decoration: none;color:black">　　　           <strong>yahoo!</strong>
         </a>
      </p>
 </div>

※タグ内でstyle定義していますが、css側で定義した方が、レスポンシブwebサイトで対応しやすくなります。

 ２、起動時に初期設定する window.onload、もしくは、 $(document.body).readyにて、設定を行います
  ・window.onload
   文書のローディング工程の終了時に発生します。このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、全ての画像とサブフレームのロードは完了している。
  ・$(document.body).ready
　　画像の読み込みなどは待たず、 DOMツリーの構築が終わった時点で実行されます。
※window.onloadと$(document.body).readyの違いは、「$(document).ready() が先に実行されて、$(window).load() の方が後に実行される」となります。
詳しくは次のサイト一読すると理解しやすいです。
http://rcmdnk.github.io/blog/2015/07/11/computer-javascript-jquery/


３、ブラウザ判別
 (1) 説明
   window.navigator.userAgentを使って判別を行います 
 (2) コード 
   var  browzer;
    if (userAgent.indexOf("Chrome") != -1) {
        //Chrome
        _browzer = BrowzerType.chrome;
    } else if (userAgent.indexOf("Firefox") != -1) {
        //Firefox
        _browzer = BrowzerType.firefox;
    } else if (userAgent.indexOf("Trident") != -1) {
        //IE11
        _browzer = BrowzerType.ie11;
    } else if (userAgent.indexOf("MSIE") != -1) {
        //IE 6 - 10
        _browzer = BrowzerType.ie10;
    } else if (  userAgent.indexOf("Edge") == -1)
    {   // Edge
        _browzer = BrowzerType.edge;

    } else {
        //other
   }
      

４、デバイス判別
 (1) 説明
   window.navigator.userAgentを使って判別を行います 
 (2) コード 
   var _device
     var userAgen2t = window.navigator.userAgent.toLowerCase();
    if (userAgen2t.indexOf('ipad') != -1) {
        _device = DeviceType.tablet;
    } else if (userAgen2t.indexOf('iphone') != -1) {
        _device = DeviceType.sp;
    } else if (userAgen2t.indexOf('Android') != -1) {
        _device = DeviceType.sp;
    } else if (userAgen2t.indexOf('windows') != -1) {
        _device = DeviceType.pc;
    } else {
        _device = DeviceType.onther;
    };


投稿者 時刻: 0 件のコメント:
ラベル: , , , , ,
登録: 投稿 (Atom)