グラフ(折れ線グラフ、棒グラフ、レーダチャートなど)描画用のライブラリ。 ※単にグラフを書きたいだけの人はD3.jsより簡単なのでお勧め。 ファイルダウンロード先/公式ドキュメント ダウンロード先:http://www.chartjs.org ドキュメント:http://www.chartjs.org/docs 使い方 canvasを用意して、Chart.jsへグラフの情報(lineChartData)とグラフ全体のオプション(option)を渡して描画する。 下記の例は折れ線グラフ。ChartオブジェクトのBarメソッドを実行すれば棒グラフになるし、Radarメソッドを実行すればレーダーチャートになる。 <!--ライブラリ読み込み --> <script src="js/Chart.min.js"></script> <!--描画箇所 --> <canvas id="lineChartC
Jeff Sauro氏は、統計とユーサビリティに関するコンサルティング会社である、MeasuringU社の創設者であり、1,000社以上の顧客を抱えています。彼は、統計やUXに関する、20ケ以上の文献と5つの本を執筆しています。 カスタマーエクスペリエンスを可視化するには実に莫大な量のデータがあり、ビッグデータからスモールデータなどの形態を取り、且つそれらは質的データ・量的データの両方を含みます。 UXのよりよい理解や改善を追求するにあたって、データの可視化はその関係性やパターンを明確にする有効な手段です。今回は、データを可視化するための、5つのテクニックについて紹介したいと思います。 1. 親和図法 親和図法は、一見関連性が無いように思える情報を、整理するための手法です。一般的には、下の写真のような、ポストイットを使った作業により行われます。主な利点としては、誰でも実行できるような簡単な
まずは、元データになる表を下のように作成します。 各月の間には空白列を挿入して、一番上のセルには空白スペースを入力しておきます。 (横軸の月を中央揃えにするためです。) 積み上げ縦棒グラフの作成 作成した表を選択して、[挿入]タブから[積み上げ縦棒]をクリックします。 グラフが作成できました。ここから少し編集します。 データの選択で編集 グラフエリアを選択したまま、[デザイン]タブの[データの選択]をクリックします。 [データソースの選択]ダイアログボックスが表示されます。 [凡例項目]の[区分]は不要なので、選択して[削除]ボタンをクリックします。 そのまま[横(項目)軸ラベル]の[編集]ボタンをクリックします。 [軸ラベルの範囲]を年度が入力されたセル範囲まで拡大します。 ここでは、セル[B1]からセル[L2]までになります。 [OK]ボタンをクリックします。 [データソースの選択]は
解説記事内の画像はExcel 2010のものですが、操作方法は下記のバージョンで同じです。 Excel 2010, 2007 左のような二重ドーナツグラフ。 内側のドーナツでは各県の割合を表し、外側のドーナツでは、その各県のデータを地区ごとにまとめて表しています。 こういったグラフを作る際のポイントは、グラフの元となるデータの「表のつくり」。 普段なら、すっきりまとめるために、左のような体裁の表にしたりしますが、二重ドーナツグラフを作る場合にはこのような体裁にせず、 内訳のデータ、合計のデータを別の列にするのがポイントです。 ドーナツを二重にするために、グラフの元となるデータも2列にする、というイメージです。 グラフの元となるデータさえポイントを押さえれば、あとはスムーズに作成できます。 「二重(三重)ドーナツグラフの作成」でご紹介している方法で操作すればOK。 グラフの元となるデータを範
Windows 7 Home Premium、他… (すべて表示する) (折りたたむ) Windows 7 Professional Windows Vista Home Premium Windows Vista Business Windows XP Professional Windows XP Home Edition Windows 7 Home Premium Windows 7 Professional Windows Vista Home Premium Windows Vista Business Windows XP Professional Windows XP Home Edition
Googleドライブのスプレッドシート Googleドライブ エクセルを使う要領で、手軽にグラフが作れます。 作成できるクラスは、線グラフ、面グラフ、縦棒グラフ、横棒グラフ、散布図、円グラフ、ジオチャート(地図付きグラフ)、トレンドグラフ、ローソク足チャート、ゲージ図、組織図、ツリーマップ、モーショングラフ、タイムライン、スパークライン、テーブル(表)などなど様々な図表が作れます。 スプレッドシートの場合は、次のような画像に書き出すことも手軽にできますし、 以下のような、インタラクティブなグラフを直接サイトに埋め込むこともできます。 infogr.am infogr.am 単なるグラフの他にも、インフォグラフィックなども作成できるWEBサービス。グラフの種類も多岐にわたり、サイトに埋め込み表示することで、インタラクティブなグラフを作ることができます。 作成できる図表は、インフォグラフィック
指定した期間の進捗を表示するプログレスバーを実装するプラグイン「Let It Flow」を紹介します。 jQueryプラグイン「Let It Flow」このプラグインを使えば、指定した期間内で今日がどの位置にあるかの進捗率をパーセント表示するプログレスバーを実装することができます。 オプションでは、テキストやプログレスバーのカラーを指定することができます。また進捗の途中にステップを表示することもできます。 それではデモページをご覧ください。 「Let It Flow」のデモ デモのソース(HTML + jQuery)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Let It Flow のデモでーす。"> <link rel="stylesheet" href="c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く