2015-10-01から1ヶ月間の記事一覧
初めに * 例えば、ダイアログを表示した後に、グラフをappendで追加した形で描画するといった構成の場合 ダイアログを表示し、その後再度、ダイアログを表示させた場合 以前のグラフが表示されたまま、グラフが再度描画されてしまう（グラフが増え続けて描画…
はじめに http://blogs.yahoo.co.jp/dk521123/35480801.html で行ったonmouseイベントをとったが、 今回は、clickイベントからモーダルダイアログを表示する サンプル http://blogs.yahoo.co.jp/dk521123/35435961.html の円グラフをクリックしたらモーダル…
■ 方法 【1】CSS/JavaScriptを使用する => style="display: none" を使用して、切り替える 【2】jQueryを使用する [1] hide/show を使用する [2] toggle / fadeToggle / slideToggle を使用する ■ 注意 「style="display: none"」と「visibilityプロパティ」…
モーダルダイアログの実装方法 * 色々な方法があると思うが... [1] jQueryのプラグインで実装する 1-1) Remodal 1-2) Custombox 1-3) LeanModal など... http://ichimaruni-design.com/2015/03/jquery-modal/ http://blog.8bit.co.jp/?p=11326 [2] jQuery / …
初めに http://xica-inc.com/blog/member-blog/2014/0604/ をもとに作成 使用したAPI http://c3js.org/reference.html * transform() * groups() * load() * flow() * ygrids.add() / ygrids.remove() : Y軸の追加/削除 サンプル <html> <head> <meta charset="UTF-8"> </meta></head></html>
初めに * C3.js に関する資料が少ないのでメモ。 * 以下の公式サイトから一部抜粋。 http://c3js.org/reference.html ■ 表示位置の指定 : bindto <div id="chartToShow"></div> <script> var chart = c3.generate({ bindto: '#chartToShow', data: { columns: [ ['data1', 10], ['data2', 20], ],</script>…
前準備 [1] 以下のサイトから、tipsy の javascript と CSS をダウンロードする 1-1) jquery.tipsy.js 1-2) tipsy.css https://github.com/jaz303/tipsy [2] jQuery と 1)でダウンロードしたファイルをインポートする サンプル <html> <head> <meta http-equiv="Content-type"content="text/html; charset=UTF-8"></meta> </head></html>
■ はじめに https://dk521123.hatenablog.com/entry/2015/10/07/000426 の続き。 今回は、D3.jsでのアニメーション表示について扱う。 【１】関連するメソッド １）transition() * アニメーション開始 cf transition : 〔形や状態などが〕推移［移行］する、…
■ 表示させる方法 [1] HTMLのtitle属性を用いた方法 => とりあえず表示させるなら、これでOK [2] CSSとマウスイベントを用いた方法 => マウスイベントは、イベント設定が可能な on() を利用する 補足：jQuery 'tipsy' を用いた方法について http://blog.qara…
はじめに http://blogs.yahoo.co.jp/dk521123/35443473.html http://blogs.yahoo.co.jp/dk521123/35446731.html http://blogs.yahoo.co.jp/dk521123/35450674.html で、DataMaps のことを書いたが、それ以外の細々したこともメモ。 なお、以下が参考になる h…
![はてなブックマーク - 【JavaScript】D3.js / TopoJSON / DataMaps [4] ～ DataMaps あれこれ ～](https://b.hatena.ne.jp/entry/image/https://dk521123.hatenablog.com/entry/35500909)
凡例を表示するには... [1] 独自でコーディングして、凡例を作成 [2] 「d3 SVG Legend」プラグインを使って、凡例を作成 [1] 独自でコーディングして、凡例を作成 サンプル http://blogs.yahoo.co.jp/dk521123/35450750.html のサンプルで凡例部分を抜き出し…
■ 複数のDivタグで回り込む * 以下の「修正前」のように、複数のDivタグがあり、並列に配置したかったのだが、回り込んでしまう。 修正後 <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="">https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style type="text/css"> div.parent { border: black s</style></link></meta></head></html>…
■ はじめに * 工数削減には、様々なツール・フレームワークなどを使う必要があるが それがフリーで、商用利用可能かどうか重要になってくるので、 ライセンスについて、メモっとく。 ■ GPL(General Public License) http://www.itmedia.co.jp/enterprise/art…
サンプル <meta charset="utf-8"> <style> .bar:hover { fill: steelblue; } .axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .tooltip { border: 1px solid #eee; background-color: #fff; padding: 8px 8px 0 8p</meta>…
■ はじめに * Webページに必要な素材などのサイトをメモ ■ フリーアイコン https://www.iconfinder.com/icon-sets/featured/free https://icons8.com/ http://icooon-mono.com/ https://www.flaticon.com/ http://www.veryicon.com/ http://www.iconseeker.c…
■ はじめに https://dk521123.hatenablog.com/entry/2015/10/07/000426 の D3.jsでは、SVG要素を知ってた方が理解し易いので 今回は、SVG要素を扱う。 目次 【１】SVG (Scalable Vector Graphics) 【２】サンプル 例１：簡単な棒グラフ 【３】SVG要素と図形 …
Ajaxについて * Ajax = Asynchronous JavaScript ＋ XML * ブラウザの画面を更新することなく、非同期で、javascriptを使ってサーバーにデータを送り、 そのデータをサーバー側で受信し処理し、それをまたjavascriptに返し、 変更する個所だけ画面を書き換え…
サンプル 例1 * ただし、負の値は未対応 <meta charset="utf-8"> <style> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar { fill: steelblue; } </style> <body> <script src="">https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.j</body></meta>…
DataMaps Plugin [1] デフォルトで配備されているプラグイン 1-1) bubbles : バブル チャート 1-2) legend : 凡例(マウスオーバー時のダイアログが表示) 1-3) arc : arc(アーク) = 弓型(フライトで飛行場から飛行場に表示されるのに使われる？） 1-4) labels…
![はてなブックマーク - 【JavaScript】D3.js / TopoJSON / DataMaps [2] ～ DataMaps Plugin編 ～](https://b.hatena.ne.jp/entry/image/https://dk521123.hatenablog.com/entry/35446731)
必要なもの D3.js * 以下の関連記事を参照のこと。 http://blogs.yahoo.co.jp/dk521123/35423681.html TopoJSON 導入方法 (1) 以下をインポートする(かダウンロードしてインポートする) <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script> DataMaps * ここからが本題 ライセンス * MIT https://github.com/mar…
![はてなブックマーク - 【JavaScript】D3.js / TopoJSON / DataMaps [1] ～ 世界地図を作成する ～](https://b.hatena.ne.jp/entry/image/https://dk521123.hatenablog.com/entry/35443473)
サンプル * アニメーション、なんちゃってTooltip * とっかかりとして一番いいかも <html> <head> <meta charset="UTF-8"> <style> </style> </head> <body> <script src="">http://d3js.org/d3.v3.js"> <script> var dataset = [ {graphLegend:"001", graphValue:10, graphColor:"LightPink"}, {graphLegend:"002", graphValue:20, graphColor:"Lig</body></html>…
サンプル * 軸あり、アニメーション、なんちゃってツールチップ <meta charset="utf-8"> <style> .bar:hover { fill: steelblue; } .axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .tooltip { border: 1px solid </meta>…
サンプル 基本的な折れ線グラフ <html> <head> <meta charset="UTF-8"> <style> .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } </style> </head> <body> <script src="">http://d3js.org/d3.v3.js"> <script> var margin = {top: 2…</body></html>
■ はじめに * Excelでドキュメントを作成した際に、シートが増えると、 目次を作成して、その目次にリンクを張っておけば便利だが その目次を自動生成できるようにする ■ サンプル Sub CreatContents_Click() On Error GoTo ErrorHandler Const ContentsShee…
■ はじめに * D3.js について、まとめる 目次 【１】D3.js １）使用上の注意 【２】公式サイト １）日本語サイト ２）API リファレンス 【３】開発に必要なツール 【１】D3.js * Data Driven Documentの略 * Protovis の後継ライブラリ。 Protovis について…
■ファイルをリネームした後に実行したらエラー「The view ...」が表示 * ファイルのリネームをやってたら、実行した後に、以下のエラー内容がブラウザに表示された エラー内容 The view 'Index' or its master was not found or no view engine supports the…
初めに http://blogs.yahoo.co.jp/dk521123/35414300.html で、グラフが描けたので、次に以下を考える 1) グラフのデザインをどの程度変更できるのか 2) どんなグラフの種類があるのか 1) グラフのテーマ(ChartTheme)について 1-1) 既存のテーマ http://blog…
![はてなブックマーク - 【ASP.NET MVC】【VB】グラフ描画 ～.NET標準機能 / グラフの種類 & デザイン編～ [2]](https://b.hatena.ne.jp/entry/image/https://dk521123.hatenablog.com/entry/35416865)
初めに http://blogs.yahoo.co.jp/dk521123/35406503.html でグラフ描画の検討したので、実際に使用してみる C#のサンプルは結構あるが、あんまりVBってないので、メモ。 準備 * プロジェクト配下の「参照」を右クリックし、[参照の追加]-[アセンブリ]-[フレ…
![はてなブックマーク - 【ASP.NET MVC】【VB】グラフ描画 ～.NET標準機能 / 基本編～ [1]](https://b.hatena.ne.jp/entry/image/https://dk521123.hatenablog.com/entry/35414300)
■ バックアップファイルを生成するには * 以下のSQL文を実行する サンプル データベース「SampleDB」を「C:\temp\backupDb.bck」に保存する場合 /* BACKUP DATABASE [対象データベース] TO DISK = 'バックアップファイル保存先' WITH INIT; */ BACKUP DATABA…
■ エラー「FILESTREAM 機能が無効になっています」が表示 http://blogs.yahoo.co.jp/dk521123/35411224.html の時に、バックアップファイルを復元する際に、以下のエラー内容が表示され、復元できない エラー内容 サーバー'XXX'の復元に失敗しました Microso…
