【資料作成の効率化Tips】表やグラフはベタ打ちするよりスプレッドシートから読み込むのがおすすめです。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回は、スライドやドキュメントで資料を作成するときに、スプレッドシートから表やグラフを読み込む方法についてまとめました。 ※この記事での「スライド」とはGoogleスライド(パワーポイントのようなプレゼンテーション用資料作成ツール)、「ドキュメント」とはGoogleドキュメント(Wordのような文書作成ツール)を指しています。LIGでは主にこれらのツールを資料作成に利用しています。 スプレッドシートから表やグラフを読み込む 効率を上げて正確性も上がる 私は、会議やプレゼンテーション用に資料を作る機会がよくあるのですが、定期的に数字やグラフのアップデートをする際に、毎回時間がかかっていました。 スライドやドキュメントは、計算式を使って動的に表やグラフを作るには使いづらいため、数字をスプレッドシートで計算して、毎回手入力をしたり、体裁を整えたり、手入力したことでミスがないかの確認などがあるため
データ可視化に貢献するチャートCSSフレームワーク・「Charts.css」
Charts.cssはデータ可視化のためのチャートCSSフレームワークです。HTMLによるデータビジュアライズの際にスタイリングをサポートするクラスを提供してくれます。 面や棒、折れ線、円やドーナツなどよく見かける一般的なチャートやこれらのマルチデータ、パーセンテージや積み上げ式、3Dなど様々なビジュアライズも対応されています。 少しクセがある印象ですが、慣れれば問題なさそうでした。HTML形式のデータに対応する場合にあると作業がかなり楽になりそうですね。 動作サンプル及び簡単に使い方のご紹介です。基本的にはtableが使われ、classを付与する事でビジュアライズされます。 <table class="charts-css"> ... </table>単なるtableをビジュアライズするにはCharts.cssを読み込んだうえで上記のようにcharts-cssというclassを付与します
AnyGrids - 高機能なテーブル表示ライブラリ
業務システムで最もよく使うのが一覧でのデータ表示ではないでしょうか。多くはテーブルタグを使って構築しますが、ソートや表示するデータの多様さによって、より多機能を求められます。 今回紹介するAnyGridsはビジネスデータの表示に特化したライブラリとなっています。業務システムでのデータ表示に一役買ってくれそうです。 AnyGridsの使い方 デモです。アイコンやグラフを表示しています。 一つの行を複数段で表示できます。 ページネーション、ソートが備わっています。 グラフはマウスオーバーに対応しています。 AnyGridsの主な機能はページネーション、ソート、子供の行サポート、集計行、グラフ連携となっています。データ自体はJSONの配列で設定します。細かな表示部分を作り込まない分、実装が手軽になりそうです。 AnyGridsはJavaScript製のソフトウェア（ライセンスは独自）です。 An
編集できるtableと、その入力値に連動した簡易的なグラフ
Result 編集はcontenteditable属性を使っています。 動作サンプルなのですべてのセルは編集可能となっていますので、コンテンツに応じて便宜変更してください jQueryvar vis = function(e) { var count = $(e).children('td').not(':first-of-type').length; var width = $('.chart').height(); var barwidth = (width/count)-10; var heighest = 0; var chartTitle = $('th:first-of-type').html(); var tableTitle = $('.table-title').html(); var chartTitleVal = $(e).children('td:first-of-
Chartinator
About Chartinator Chartinator - Google Charts made easier and accessible. Description: A jQuery plugin for transforming HTML tables, Google Sheets and js arrays into charts using Google Charts Repository: https://github.com/jbowyers/chartinator Demo: http://chartinator.com Bower: chartinator Requires: jQuery, Google Charts Author: jbowyers Copyright: 2015 jbowyers License: GPLv3 Version: 0.3.10 De
- aiwsolutions
Aiwsolutions offers Name Card Templates, Restaurant Menu Templates, Graphic Design Templates, Resume Templates, Booklet Templates, Website Templates, Wordpress Theme Templates, Promotion Templates, Catalog Design Templates, Food Menu templates, Drink Menu Templates, Blog Theme Templates, Family Tree Designs, Blog Header Designs, Graphic designs, Label Designs, Product Label Designs... and much mor
tableのデータを元に、棒グラフを生成するjQueryプラグイン・TableBarChart
tableのデータから棒グラフを自動生成するスクリプトのご紹介です。jQueryに依存します。手軽で良かったので備忘録として。 tableに記入されたデータを元にアニメーションエフェクト付きの棒グラフを自動生成する、というもの。以下、動作サンプルです。 tableはマークアップで、棒グラフはそのtableのデータを元に生成されています。 <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script> <script type="text/javascript" src="TableBarChart.js"></script>本体とプラグインを読み込みます。 $('#foo').tableBarChart('#bar', '', false);tableとグラフを表示する要素を指定し
jQuery HighchartTable plugin
Ever wanted to convert your HTML data tables into fancy Highcharts graphs? Learn more » Intro We wanted to use Highcharts graph library but with a way to convert automatically our HTML tables containing data into graphs. So we decided to code a jQuery plugin to make this conversion peacefully. And voila, here we are :) Wanna see a demo ? How it works We use HTML5 data-* attributes to specify how t
jQuery HighchartTable plugin
Ever wanted to convert your HTML data tables into fancy Highcharts graphs? Learn more » Intro We wanted to use Highcharts graph library but with a way to convert automatically our HTML tables containing data into graphs. So we decided to code a jQuery plugin to make this conversion peacefully. And voila, here we are :) Wanna see a demo ? How it works We use HTML5 data-* attributes to specify how t
tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」:phpspot開発日誌
Chartify ? A Visualization Plugin for jQuery tableデータをグラフに置き換えてくれるjQueryプラグイン「Chartify」 <table>のデータを最小１行でGoogleのChart APIを使ってグラフ画像に変換してくれるみたいです。 マークアップ上では次のようなテーブルがあったとします。 プラグインを読み込んで .chartify します。色なんかも指定 すると次のようなグラフに変換されて表示されます。 HTML上にデータがかけてそれをグラフに変換してくれるのはなかなかいいですね。 関連エントリ 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」 ドリルダウンなグラフを作成できるjQueryプラグイン「DDChart」 地下鉄の路線図を描けるjQueryプラグイン「Subway Map Visualization」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Googleスプレッドシートのデータを元にチャートや地図、table等に変換するスクリプト・「Sheetsee.js」