Skip to main content

NBA MVP 半程马拉松大胡子领先

北京时间2017年1月6号,火箭队2分战胜雷霆队,最后总比分是118:115。   Can you really have a battle between the two leading contenders for the NBA’s MVP award with four-time winner LeBron James and the two-time reigning MVP, Stephen Curry, miles from the basketball court? 现在有两位MVP有力竞争者之间,不是4届MVP的詹姆斯和2届MVP的库里,而是火箭的大胡子哈登和雷霆的威少! 下面我们看看两人的数据比对: See the Pen Stacked bar chart with negative values by Zhenhua Chen (@wastonchen) on CodePen. In fact, yes […]

Read More

8個のライブラリ JSでグラフ描画入門

今回は、JavaScriptを使って「グラフやチャートを描きたい!」とか、「さまざまなデータを可視化させたい!」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 Chart.js 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ&レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式サイトからダウンロードするか、以下のCDN経由から利用できます。 <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js”></script> あとは、「body要素」に「canvasタグ」を配置すれば準備OK! <canvas id=”stage”></canvas> 一般的な「棒グラフ」を描くサンプルコードは以下のとおり。 var canvas = document.getElementById(‘stage’); var chart = new Chart(canvas, { type: ‘bar’, //グラフの種類 data: mydata, //表示するデータ options: options //オプション設定 }); 記述はシンプルで、グラフの種類(「bar」「line」「pie」など)を指定したら、「データ」と「オプション」をオブジェクト形式で渡してあげるだけです。 サンプルデモはコチラ!(スマホの方はコチラから) 【リソース】 ・公式ドキュメント ・ライセンス(MIT) Canvas.js 豊富なグラフパターンが用意されており、細かい部分までカスタマイズ可能な高機能グラフライブラリとなっています。 IE6も含めたほとんどのブラウザで利用でき、レスポンシブ対応のグラフは設定次第で「アニメーション表示」や「ズーム/パン」なども利用できます。 【 基本の書き方 】 「canvasjs.js」ファイルを公式サイトからダウンロードするか、以下のCDN経由から利用できます。 <script src=”https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js”></script> そして、「body要素」にグラフを描画する「divタグ」を配置します。 <div id=”stage”></div> 一般的な「棒グラフ」を描くサンプルコードは以下のとおり。 var stage […]

Read More