Webグラフ / 地図作成ツール

【Vue】vue-chartjs / グラフ作成 ~ 入門編 ~

■ はじめに 今回は、VueベースのWebサイトに 比較的容易にグラフを作成できる vue-chartjs について扱う。 目次 【1】vue-chartjs とは? 【2】デモ 【3】環境設定 【4】グラフ作成手順 【5】サンプル 【1】vue-chartjs とは? https://vue-chartjs.or…

【JS】 OpenLayers ~ 入門編 ~

■ OpenLayers * 地図表示するJavaScriptライブラリ ライセンス * 2-Clause BSD https://openlayers.org/en/latest/doc/ ■ 公式サイト https://openlayers.org/ 例 https://openlayers.org/en/latest/examples/ デモ(アニメーション) https://openlayers.or…

【JS】 Google Charts [4] ~ タイムライン編 ~

■ はじめに https://blogs.yahoo.co.jp/dk521123/37572608.html https://blogs.yahoo.co.jp/dk521123/37572794.html https://blogs.yahoo.co.jp/dk521123/37572930.html の続き。 今度は、タイムラインを作成する 公式サイトのサンプルを活用しながらやると…

【JS】 Google Charts [1] ~ 円グラフ編 ~

■ Google Charts * 商用利用 * JavaScriptで記述する => グラフ自体はSVG形式(Scalable Vector Graphics)で記述される ■ 公式サイト https://developers.google.com/chart/ ■ 動画レッスン https://dotinstall.com/lessons/basic_chart_tools_v2 ■ サンプ…

【JS】 Google Charts [3] ~ 折れ線グラフ編 ~

■ はじめに https://blogs.yahoo.co.jp/dk521123/37572608.html https://blogs.yahoo.co.jp/dk521123/37572794.html の続き。 今度は、折れ線グラフを作成する 公式サイトのサンプルを活用しながらやるといいかも https://developers.google.com/chart/inter…

【JS】 Google Charts [2] ~ 棒グラフ編 ~

■ はじめに https://blogs.yahoo.co.jp/dk521123/37572608.html の続き。 今度は、棒グラフを作成する 公式サイトのサンプルを活用しながらやるといいかも https://developers.google.com/chart/interactive/docs/gallery/barchart#examples ■ サンプル <html lang="jp"> <head> <meta charset="utf-8"> <title></title></meta></head></html>…

【HTML】タイムライン を表示するには...

■ はじめに * タイムライン(Timeline)を表示する方法を考える ■ Google Charts * 商用利用 * 詳細は、以下の関連記事を参照。 https://blogs.yahoo.co.jp/dk521123/37572608.html 公式サイト https://developers.google.com/chart/interactive/docs/galler…

【JavaScript】D3.js ~ 目盛を表示する ~

サンプル y軸を出力 <html> <head> <meta charset="UTF-8"> <style> .axis text { font-family: sans-serif; font-size: 11px; } .axis path, .axis line { fill: none; stroke: black; } </style> </head> <body> <div id="chart"></div> <script src="">http://d3js.org/d3.v3.js"> <script> var svg = d3.select("#chart").appen…</body></html>

【JavaScript】D3.js / TopoJSON / DataMaps [3] ~ DataMaps Custom Plugin編 [2] ~

サンプル http://blogs.yahoo.co.jp/dk521123/35450674.html の続き。 例3:地図上に積み上げ棒グラフ * 負の値も対応 <html> <head> </head> <body> <script src="">http://d3js.org/d3.v3.js"> <script src="">http://d3js.org/topojson.v1.min.js"> <script src="datamaps.world.js"></script> </body></html>

【JavaScript】 D3.js ~ SVG / D3.js のグラフを PNG 画像で 保存することを考える ~

方法 [1] SVG を Canvas に変換し、その後、Canvas を画像として保存する => このブログで扱うのは[1]の方法。 [2] svgデータをbase64形式にして保存し、base64形式の画像データを保存する => 以下のサイトを参照のこと。 * javascriptでsvgデータをbase64形…

【JavaScript】Three.js ~ 入門編 ~

Three.jsとは? * WebGLを利用して、ブラウザ上で3Dを描画することができる 補足:用語 * WebGLとは? => ウェブブラウザで3Dを表示させるための標準仕様。 注意 * WebGLを対応したブラウザでないと使えない * 以下のサイトで確認した方がいい http://caniuse…

【JavaScript】D3.js ~ 配列操作 ~

■ sum サンプル <html> <head> <style> </style> <meta charset="UTF-8"> <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script> </head> <body> <div id="result"></div> <script> var dataset = [ { yValue: 5 }, { yValue: 2 }, { yValue: 3 }, { yValue: 5 }, { yValue: 2 }, { yValue: 3…</body></html>

【JavaScript】C3.js ~ モーダルダイアログを表示する ~

はじめに D3.js ~ モーダルダイアログを表示する ~ http://blogs.yahoo.co.jp/dk521123/35501040.html の C3.js 版。 サンプル * ベースは以下の関連記事と変わらんけど http://blogs.yahoo.co.jp/dk521123/35501040.html <html> <head> <style> .modal-content { position:fi</head></html>…

【JavaScript】C3.js ~ C3.jsあれこれ ~

はじめに * 基本、以下に書いてある http://c3js.org/reference.html ■x軸関連 a-1) x軸表示を斜め表示に : axis.x.tick.rotate axis: { x: { tick: { rotate: 45, } } } a-2) x軸表示の折り返し : axis.x.tick.multiline http://c3js.org/reference.html#ax…

【JavaScript】C3.js ~ ツールチップあれこれ ~

■ Tooltipと共に表示されている線を消すには * 以下で消える <style> #chart .c3-xgrid-focus { display: none; } </style> http://ambracode.com/index/show/52830 ■ 独自のTooltipを実装するには * 以下のサンプルが役に立った。 http://www.zemoko.com/javascript/custom…

【JavaScript】D3.js / TopoJSON / DataMaps [5] ~ DataMaps 内で 改行入れのテキストを表示するには... ~

はじめに http://blogs.yahoo.co.jp/dk521123/35523904.html で述べた通り、SVGオブジェクト配下にテキストを表示をする場合、\n や <br> は、改行されない。 地図上でテキストの折り返しを行う。 方法などは、上記の関連記事を参照のこと。 サンプル http://blo…

【JavaScript】D3.js / C3.js で 改行入れのテキストを表示するには...

はじめに * SVGオブジェクト配下にテキストを表示をする場合、\n や <br> は、改行されない。 * 考える際に以下のサイトが役に立った。感謝。 http://qiita.com/hnakamur/items/cfb8b0005488a2f34fb0 以下も今後のために見ておきたい http://plnkr.co/edit/YBCAc…

【JavaScript】C3.js ~ C3.js を使った グラフ描画の共通化 ~

はじめに http://blogs.yahoo.co.jp/dk521123/35514061.html で、いくつかのサンプルを作成してみたが、データ以外ほとんど同じ書き方と感じた。 また、もし、棒グラフを書く画面が複数あった場合、同じようなの書くのメンドくさくなりそうなので 共通化(ラ…

【JavaScript】C3.js ~ 基本グラフのサンプル編 ~

サンプル http://c3js.org/examples.html から基本的なグラフを書いてみる * 設定については、以下の関連記事を参照のこと。 http://blogs.yahoo.co.jp/dk521123/35509265.html ■ 例1 : 円グラフ <html> <head> <meta charset="UTF-8"> <link href="./c3/c3.css" rel="stylesheet" type="text/css"> </link></meta></head></html>

【JavaScript】C3.js ~ 入門編 ~

■ C3.js * C3 : D3-based reusable Chart library => D3 のラッパーライブラリ(D3については、以下の関連記事を参照のこと) http://blogs.yahoo.co.jp/dk521123/35423681.html ライセンス * MIT ■ 公式サイト http://c3js.org/ デモ * 使用可能なグラフが分…

【JavaScript】D3.js ~ グラフをクリアにする ~

初めに * 例えば、ダイアログを表示した後に、グラフをappendで追加した形で描画するといった構成の場合 ダイアログを表示し、その後再度、ダイアログを表示させた場合 以前のグラフが表示されたまま、グラフが再度描画されてしまう(グラフが増え続けて描画…

【JavaScript】D3.js ~ モーダルダイアログを表示する ~

はじめに http://blogs.yahoo.co.jp/dk521123/35480801.html で行ったonmouseイベントをとったが、 今回は、clickイベントからモーダルダイアログを表示する サンプル http://blogs.yahoo.co.jp/dk521123/35435961.html の円グラフをクリックしたらモーダル…

【JavaScript】C3.js ~ グラフを動的に変更するには... ~

初めに 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>

【JavaScript】C3.js ~ 基本文法 / 構文編 ~

初めに * 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>…

【JS】D3.js ~ アニメーション表示する ~

■ はじめに https://dk521123.hatenablog.com/entry/2015/10/07/000426 の続き。 今回は、D3.jsでのアニメーション表示について扱う。 【1】関連するメソッド 1)transition() * アニメーション開始 cf transition : 〔形や状態などが〕推移[移行]する、…

【JavaScript】D3.js ~ ツールチップを表示する ~

■ 表示させる方法 [1] HTMLのtitle属性を用いた方法 => とりあえず表示させるなら、これでOK [2] CSSとマウスイベントを用いた方法 => マウスイベントは、イベント設定が可能な on() を利用する 補足:jQuery 'tipsy' を用いた方法について http://blog.qara…

【JavaScript】D3.js / TopoJSON / DataMaps [4] ~ DataMaps あれこれ ~

はじめに 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 ~ 凡例を表示する ~

凡例を表示するには... [1] 独自でコーディングして、凡例を作成 [2] 「d3 SVG Legend」プラグインを使って、凡例を作成 [1] 独自でコーディングして、凡例を作成 サンプル http://blogs.yahoo.co.jp/dk521123/35450750.html のサンプルで凡例部分を抜き出し…

【JavaScript】D3.js ~ 複合グラフ / 折れ線・縦棒グラフを作成する ~

サンプル <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>…

【JavaScript】D3.js ~ 積み上げ縦棒グラフを作成する ~

サンプル 例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>…