[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
jQueryベースのグラフ作成ライブラリ·jqPlots MOONGIFT
Web上で見やすいグラフを作成する手法としては、画像で生成する、Flashで生成するかのどちらかが多かった。稀にJavaScriptで生成するタイプもあったが、Canvasタグを使う関係上、IE6では表示できず業務アプリなどでの利用は難しかった。 JavaScriptのみでグラフを表示する だが、例えCanvasを使っていたとしてもライブラリが対応していれば問題ない。そこで試したいのがjqPlotsだ。 今回紹介するオープンソース・ソフトウェアはjqPlots、jQueryベースのグラフ描画ライブラリだ。 jqPlotsはCanvasタグを使っているが、対応ブラウザはIE6〜IE8、Firefox、Safari、Operaとなっている。筆者環境では試していないが、IE6でも恐らく大丈夫なのだろう（ぜひ試していただきたい）。これだけ多数のブラウザに対応していれば一般向けWebサービスでも使え
チャートを作るための無料ツール25 – creamu
FrancescoMugnai.comで、チャートを作るための無料ツールが紹介されています。 ざっといくつかご紹介。 » JS Charts Javascriptベースのチャートジェネレータ » pChart PHPのクラスで作られたフレームワーク » XML/SWF Charts FlashとXMLで作られるチャート。↑のキャプチャはこちら » Chronoscope オープンソースのチャート » Google Chart API Google Chart API その他のリストは以下からどうぞ。 » 25 great free resources for making charts WALL・Eを見た。なかなかおもろかったね。示唆的だったなぁ。そういえばWALLとEの意味が最後にわかるのかなと思ったけどわからんかったぞ。。なんなんだろうか。
iTunes風のあのクールな容量比率ゲージを実装できるJavaScript「gauge.js」:phpspot開発日誌
gauge.js (javascript programmable gauge) iTunes風のあのクールな容量比率ゲージを実装できるJavaScript「gauge.js」 次のようなゲージを描画できるようです。 色はいろいろ選べてカラフルにすることも出来ます。colors指定で簡単指定 サイズも自由に調整可能なのでおき場所に困らないかも。(winth, height指定で直感的) Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+など殆どのメジャーブラウザで動作。 投票結果とか、サイトのアクセス解析の利用者比率なんかを表したりするのに使えそうですね。
[JS]複雑なグラフも簡単に描けるCanvasを使ったスクリプト -Protovis
棒グラフ、折れ線グラフ、エリアグラフ、パイチャート、インラインに配置できるグラフなど単純なものから複雑なものまで簡単に描けるスクリプト「Protovis」を紹介します。
クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」:phpspot開発日誌
クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」 2009年03月18日- Visifire クールすぎて本当に動的に作ったの？というグラフが描画できてしまう「visifire」。 以下にある画像のような、ちょっと他ではなかなか無いグラフを提供してくれます。フリーで使えます。 画像編集ソフトを使えば綺麗なグラフはかけるかもしれないのですが、相当大変です。 が、このライブラリを使ってxmlでデータを書いておけばグラフ描画できます。 データ作成ツールもあるので、xmlも面倒っていう場合にも使えます→ Chart Designer もっとギャラリーを見る ネックはSilverLightなのですが、一旦描画したものをキャプチャして画像に変換してから使ってもよいぐらいクオリティが高いですね。 今後、SilverLightが一般的になっていくことも考えられ、覚えてお
【連載】セカイ系ウェブツール考 (60) きっと役立つ! ブラウザ上で「グラフ」を表現するための解決策 | ネット | マイコミジャーナル
今回のテーマは「グラフ」 データというものは、ただ一覧で表示するのではなく、グラフを使って見せたほうが効果的な場面は多い。細かな数字の違いなどは分かりづらくなるが、飛び抜けた数値を見つけ出したり一定の法則性を見出すには、表形式よりも分かりやすい。プレゼンテーションや報告書などの中で、グラフを利用している方も多いはずだ。 Webサービスを作る中でもそれは変わらない。さらにオフィス内の基幹システムでもWebブラウザで動作するものが増えている中、Webブラウザ上でグラフを表示してほしいという要望は増えつつある。とはいえ、画像を生成したり、細かな制御を行う汎用的なグラフを作成したりするのは難しい。 そこで使いたいのが外部のグラフ生成サービスやグラフライブラリだ。とくに最近ではJavaScriptやFlashを使って、サーバサイドでは用意をする必要なく使えるものも増えている。今回はそうした「グラフ」
[JS]カラフルな折れ線・棒グラフやパイチャートを描くスクリプト -JS charts
画像を使用しないで、折れ線グラフや棒グラフ、パイチャートを作成するスクリプト「JS charts」を紹介します。 JS charts demo JS chartsはjQueryなど他のスクリプトに依存せずに動作し、対応ブラウザは下記のようになっています。 Windows IE 6/7 Fx1.5+ Op 9+ Safari 3.1+ Mac Fx 1.5+ Safari 2+ iPhone 1+ 折れ線グラフや棒グラフ、パイチャートを描くには、スクリプトを外部ファイルとして記述し、書式に合わせて記述します。 JS Charts | How to use グラフはCanvasで描かれており、数値はXMLによって管理します。 XMLのサンプル <textarea name="code" class="html" cols="60" rows="5"> <?xml version="1.0"?>
ウェブでかっこいいグラフを描くためのライブラリやらテクニックやらのまとめ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
Talknote(トークノート)カルチャーマネジメントツール - Apps on Google Play
ドラゴンエッグ
無料で、グラフやチャートが簡単に作成できるオンラインサービス -Chart Tool
いい感じの図表をサクサク作れるツール「Lovely Charts」 | ライフハッカー・ジャパン
IDEA * IDEA
Google Chart Tools入門