スプレッドシートで日々の売上など、表を作ることは多いかと思います。 ただ数字を羅列するのではなく、下の図のようなグラフ(データバー)もセットで表示することで、一歩進んだ表を作ってみませんか? 今回は、スプレッドシートで簡易的な棒グラフを作成する方法を解説していきます。 こんな人におすすめ! 売上報告書にデータバーをつけて、直感的に数字の大小を比較したい。 ちょっとひと手間で仕事がデキる人の表を作りたい。 表のなかにグラフを埋め込みたい。 今日の公式 =SPARKLINE(データ, [オプション]) 項目 説明 データ グラフ作成の対象データを含むセル、もしくは範囲を指定します。 オプション グラフの種類、色、最大値などを設定します。 オプションは少々癖のある項目ですので、慣れるまでは苦戦するかもしれません。 今回は、データバーに関係する主要なオプションのみ解説していきます。 SPARKLI
Step 1 – HTML Markup To start we will create our html markup for the graph. We will create a <div> with the class “graph-wrapper”. Inside of this <div> we will add two more <div>. The first one will have the “graph-info” class, this div will contain the graph legend and the buttons that will allow us to switch between graphs. The second div will contain the two graphics (lines and bars). <div id="
Giới thiệu website CAKHIA - trang web bóng đá trực tuyến số một Bạn đang tìm địa điểm tốt nhất để thưởng thức các trận bóng đá trực tuyến? Đừng chần chừ và hãy nhanh chóng ghé qua Cakhia. Trang web sẽ cung cấp cho bạn mọi thông tin bạn muốn và là nơi giải trí tuyệt vời thoả mãn tất cả đam mê bóng đá của bạn. Dù bạn muốn xem lại bất kỳ trận bóng đá mới nhất hay là những khoảnh khắc lịch sử, Cakhia
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions. View more examples »
生活チェックサービス ChanTo.meでは、体重などの数字情報を毎日入力できるようになっているのですが、その値をグラフ表示できるようにしています。 また、毎日のチェック時に5段階評価を選択するようになっていますので、その評価も表示します。 こんな感じです。 折れ線が体重、棒グラフが5段階評価の結果です。 この表示は、jQueryのライブラリ「Flot」を使用しています。 exampleから見ていただくとわかるとおり、様々なタイプのグラフを表示できます。 また、ChanTo.meでは、IE7,8、FireFox、iPhoneのSafari、Androidの標準ブラウザで表示を確認しています。 参考までに、今回ChanTo.meでの利用方法を書いてみます。 IEへの対応 ChanTo.meはIE7以上しか対応していないので、IE6はわかりませんが、IEで使うには、jquery.flot.js
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
Miso Datasetはクライアントサイド、node.jsで利用できるデータ変換&管理ライブラリです。 データのビジュアル化(グラフ化)をする際に書かせないのが元データです。DBに入っていたり、XMLだったりと形式は色々考えられますが敢えてCSVを使ってグラフを描くのがMiso Datasetです。 デモです。CSVデータをグラフにプロットしています。 データはこのようなCSVです。 コード部です。デリミタを指定したり、フォーマットの指定もできます。 Miso DatasetはCSVやJSONを取り込んで自由に操作が出来ます。カラムの定義をしておくことで行をオブジェクトとして扱えるようになります。その他ソートしたりカウントやグルーピングしたりとSQL的な操作もできるようになっています。なおコードはnode.js/クライアントサイドのどちらでも動作します。 Miso DatasetはJav
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト! 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
The Truematter team was recently tasked with creating a fun, sexy web app that presents numerical data in an engaging way. After putting our heads together, we came up with a bar chart that responds interactively to user input without, heaven forbid, reloading any pages. We’re very pleased to be able to share that with the coding community. There are some CSS tricks involved, a dose of jQuery, and
envisionはHTML5/JavaScriptによるグラフライブラリです。ファイナンス系グラフ、フラクタルグラフを描けます。 HTML5/JavaScriptを使った高度なグラフライブラリとしてenvisionを紹介します。一般的なグラフというよりも、ファイナンス系のグラフ描画が得意なようです。 リアルタイムグラフ。刻々とグラフが追記されていきます。 タイムシリーズ。指定範囲だけを拡大できます。 こんな感じでマウスで幅を広げたりできます。 ファイナンス。株価、出来高といった指標を表示するのに使えます。 こちらも幅を変更できます。 中央をドラッグすれば左右への移動も可能です。 マウスでポイントにおける数値を表示できます。Ajaxによるデータ変更もサポートしています。 幅の変更ももちろん可能です。 フラクタル画像です。 マウスで範囲を指定して拡大できます。 envisionはHTML5のラ
Morris.js Making good-looking graphs shouldn't be hard. Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy. Morris.js started life as the code that powered the graphs on howmanyleft.co.uk. Now it's been open-sourced for the whole world to extend and enjoy. Follow me at @olly_smith on Twitter for news and updates. If you'd like to contribute, hea
GitStatsはGitリポジトリを解析して静的なHTMLファイルとグラフを出力するソフトウェアです。 Gitにaddしてcommit、addしてcommit…そんな日々の努力の結果をビジュアル化してくれるソフトウェアがGitStatsです。社内プロジェクトで使ってみても面白そうです。 supybotのGitリポジトリから作られたHTMLです。 アクティビティです。コミット数などをグラフ化しています。 時間数が出たりするのも面白いです。 コミット数を見ればプロジェクトの栄枯盛衰が分かります。 タイムゾーンごとのコミット数もユニークです。 開発者の一覧です。 ファイル数のカウントです。 拡張子ごとというのも面白いです。 コードの行数です。 タグ一覧です。 GitStatsはアクティビティ、ファイル数、コード数、タグ、開発者と言ったデータをリポジトリから抽出してグラフ化します。静的なHTMLで
Rickshaw is a JavaScript toolkit for creating interactive time series graphs. Rickshaw on GitHub Graphing Toolkit Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together. See Demo → Built on d3.js It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Customize all you l
Closure ChartsはGoogle Closure Toolsを使って構築されたグラフライブラリです。 GoogleがリリースしているJavaScriptツール群がClosure Toolsです。そんなツールを使って作られたチャートライブラリがClosure Chartsになります。 主に折れ線グラフ用です。 色を変えたり、多数の要素をグラフに配置できます。 マウスを当てるとその部分にポインタが表示されます。 縦に並んだ例。 猫の画像の上に線を引くと、その内容(?)がグラフに表示されます。 グラフの表示はリアルタイムに変化、かつ高速です。 Closure Chartsはごく小さいものではスパークラインのグラフも可能です。リアルタイムの秒が変化にも対応しているので、株価や為替の変化グラフにも使えるでしょう。 Closure ChartsはJavaScript製のオープンソース・ソフト
RocketchartはHTML5で作られたダイナミックなグラフライブラリです。 HTML5でできることがどんどん広がっています。今回紹介するRocketchartsもHTML5を駆使しています。そしてすごいグラフを作ってきました。 ローソクチャートです。HTML5で作られています。 折れ線グラフを追加しました。 さらに棒グラフと折れ線グラフのミックスです。 クリックするとその箇所の数値が分かります。 表示範囲をマウスで選択して絞り込むこともできます。 逆に広げた場合です。 RocketchartはJSONデータを使ってCanvasタグにグラフを描いています。そのため直接書き出すのはもちろん、AjaxなどでJSONデータを渡してレンダリングすることもできそうです。 RocketchartはJavaScript製、GPL v3のオープンソース・ソフトウェアになります。 MOONGIFTはこう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く