SVGで綺麗なグラフを描くライブラリ×10選
HTML5でグラフを描く方法は幾つかあります。一つはCanvasを使った方法です。これは高度なグラフィックスが描ける一方、JavaScriptなどからインタラクティブに扱うのは複雑になっています。 そこで今回はSVGを使ったグラフライブラリを紹介します。SVGはXMLベースで軽量、かつJavaScriptとの親和性も高いものが多くなっています。 morris.js morris.jsは主に折れ線、棒、曲線、ドーナッツグラフをサポートしています。データをJSONで渡すだけで使えるので学習コストが低いのがメリットです。ライセンスは簡易BSD Licenseとなっています。 Chartist – Simple responsive charts Chartistはレスポンシブであることをメリットとしています。曲線、棒、円、ドーナッツグラフをサポートしています。ブラウザはIE9以降を対象としていま
作図系ツール・ライブラリまとめ
diag.md シーケンス図とかフローチャートをしごとで描画することになった場合、 テキストから生成できたら楽なので、それ系のツールまとめ GraphViz http://www.graphviz.org/ C製 Doxygen, Moinmoinなどと連携可能 ブロック図、クラス図、ネットワーク図など PNG, SVGなど 出力可能形式一覧 JavaScript（Emscripten）版もある。リアルタイムプレビュー出来て便利 https://github.com/mdaines/viz.js PlantUML Java製 シーケンス図, ユースケース図, クラス図, アクティビティ図, コンポーネント図, ステート図, デプロイ図, オブジェクト図などめっちゃたくさん作れる PNG, SVG, LaTeX, ASCII出力 なんとワイヤーフレームも作れる。アイコンとかも入れられる。 オ
flowchart.js - SVGのフローチャートを生成するJavaScriptライブラリ MOONGIFT
システムやワークフローを分かりやすく説明する際にフローチャートを使うことがあります。特に業務システムなど、多数のシステムが複雑に組み合わさって処理が実行される場合、きちんと可視化されているかどうかで結果が大きく変わる可能性があります。 Excelで仕様書を書いているとExcel上で完結しそうです。しかしこれでは検索性やメンテナンス性がよくありません。そこで仕様書をMarkdownやHTMLで書いているならばflowchart.jsを使ってみましょう。 flowchart.jsの使い方 flowchart.jsのデモです。専用の記述方法に沿って書くことで、右側のようなフローチャートが生成されます。URLがあるところはクリッカブルになっています。 さらにカラーリングの指定もできたり、縦ではなく横に広がっていく形にもできます。 flowchart.jsはSVGで生成しているのがポイントで、元文書
Epoch·リアルタイム描画に対応したCanvas/SVGグラフライブラリ MOONGIFT
Webアプリケーションが企業においても利用されていくようになると必要になるのがグラフです。膨大なデータを見やすく整形して表示し、トレンドを見つけられるようにしなければなりません。 そのためには多種多様なグラフライブラリを知り、それがどのニーズにマッチするかを把握しておく必要があります。今回はリアルタイム系グラフに向いたEpochを紹介します。 Epochの使い方 エリアグラフ。滑らかな曲線がいいですね。 棒グラフ。 複数のグラフを比較もできます。 線グラフ。滑らかに描けます。 こちらも複数描画できます。 円グラフ。 分布図。 ヒートマップ。リアルタイムにデータを描画していきます。 ゲージ。こういうのも面白いですね。 棒グラフの積み上げ版。 エリアの積み上げ。 折れ線グラフの比較。 Epochはデベロッパーフレンドリー、リアルタイムグラフ、Canvas/SVG両方への対応が特徴となっています
Viz.js·Web上でGraphvizをSVGでレンダリング MOONGIFT
フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。 そこでさらに再利用性を高めてくれるのがViz.jsです。WebベースでGraphvizを使えるようにしてくれます。可能にするのはまたしてもEmscriptenなのですが、面白さを体感してください。 例として以下のようにGraphvizのDOT言語をそのままscriptタグに記述します。 <script type="text/vnd.graphviz" id="cluster"> digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=fill
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
