Frappe Charts - GitHub風グラフもあるSVGグラフライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebはSVG/CanvasによってWeb標準だけで高度な表現が実現できるようになりました。しかし、それを使いこなすのは大変で、多くの場合ライブラリを使って実現しているでしょう。 今回紹介するFrappe ChartsはSVGを使ってグラフ表示を行うライブラリです。 Frappe Chartsの使い方 棒グラフ。マウスオーバーで情報を追加表示できます。 折れ線グラフ。 複数シリーズ出したパターン。 折れ線グラフにグラデーション。 データを動的に追加、削除できます。 色の塗り方も変えられます。 グラフと写真などのコンテンツを連動させるタイプ。 グラフのデータを選ぶと表示が変わります。 合計の表示、平均値表示を切り替え。 GitHub風のグラフ。 離すことも、くっつけることもできます。
無料で使えるオープンソースの200種類以上あるSVG形式アイコンセット「Clarity Icons」
200種類以上もある美しいSVG形式のアイコンをまとめたアイコンセット「Clarity Icons」が、オープンソースのデザインシステムClarity Design System上で公開されています。 Clarity Design System https://vmware.github.io/clarity/icons/icon-sets#core-shapes 「Clarity Icons」には全部で200種類以上のアイコンが収録されており、アイコンは種類ごとにダウンロードすることも可能です。収録されているアイコンの種類は「Core Shapes」「Commerce Shapes」「Essential Shapes」「Media Shapes」「Social Shapes」「Travel Shapes」「Technology Shapes」の7種類で、さらに複数のバリエーションも存在し
Chartist – レスポンシブ対応のSVGグラフライブラリ
Webは表現力が弱いと言われていますが、特にグラフ周りで苦労することが多いのではないでしょうか。データを単純に一覧表示するのではなく、グラフを用いることでトレンドを知ったり、よりビジュアル的に把握できるようになります。 そこで今回は最新のグラフライブラリ、Chartistを紹介します。SVGで描かれたレスポンシブなグラフライブラリです。 Chartistの使い方 シリーズをJavaScriptの配列で与えるだけ。とても簡単ですね。 ChartistはSVGでグラフを描き、スタイルシートでビジュアルを調整できます。さらにレスポンシブに対応することで幅によってラベルの表示を変更するようになっています。対応ブラウザはIE9以降となっています。 ChartistはJavaScript製のソフトウェア（ライセンスはWTFPL）です。 Chartist - Simple responsive char
米Adobe、オープンソースのSVGコンテンツ用JavaScriptライブラリ「Snap.svg」を公開 | OSDN Magazine
米Adobe Systemsは10月23日、SVGグラフィックスを操作するためのJavaScriptライブラリ「Snap.svg」をオープンソースソフトウェアとして公開した。プロジェクトのWebサイトより入手できる。 Snap.svgは、ベクター画像フォーマットであるSVG（Scalable Vector Graphics）で作成されたコンテンツを操作するためのライブラリ。ベクター画像をWebブラウザ上で作成するためのJavaScriptライブラリ「Raphaël」を作成したDmitry Baranovskiy氏が開発しており、jQueryによるDOM操作のように簡単にSVGデータを操作できることを目的としている。 Snap.svgではSVGコンテンツの生成および操作が可能で、既存のSVGコンテンツの操作も可能。マスキング、クリッピング、パターン、フルグラデーション、グループ化といったSV
スパークラインに対応したJavaScript製のグラフライブラリ·Grafico MOONGIFT
GraficoはJavaScriptによるグラフライブラリです。棒、折れ線、スパークラインがサポートされています。 Web上でグラフを描くライブラリも充実してきています。Flash、画像など様々な選択肢がありますが今回はGrafico、JavaScriptベースのグラフライブラリを紹介します。 サンプルです。まず棒グラフ。 エリアグラフ。 積み上げ型のエリアグラフ。 こんな複雑な感じにも。 棒グラフ。 積み上げの棒グラフ。 横棒グラフ。 スパークライン。 棒型のスパークライン。 エリア型のスパークライン。 GraficoはPrototype.jsを使ってSVGでグラフを描いています。対応ブラウザはIE6以上、Firefox3以上、Google Chrome、Safari、Operaとなっています。単純に表示する他、マウスを載せた際に説明を出す機能もあります。 GraficoはJavaScr
IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
ブラウザ上で動くSVGグラフィックエディタのオープンソースが超凄い:phpspot開発日誌
SVG-edit ブラウザ上で動くSVGグラフィックエディタのオープンソースが超凄いです。 次のようなインタフェースで、Chromeだとサクサク動くSVGエディタがGoogle codeにてオープンソースでダウンロード可能です。 SVGでお手軽にお絵かきしたい場合や、SVGなお絵かきサイトなんかを作るのにも活用できそう 描画したグラフィックをSVGに変換した例。ツールバーからそのまま出力可能です。 次のようなXMLデータになります。 触ってみるだけでも価値がありそうです。 関連エントリ JavaScriptでFlashやSVGを使わない3Dアニメーション PHPでベクターグラフィックスを作成するためのチュートリアル テキストで描画されたSVGグラフィックス
Flashを使ってSVGを表示する·SVG Web MOONGIFT
SVGは次世代のWebブラウザを考える上で重要な技術だ。だが、古いブラウザではサポートされていないこともあって、普及には至っていない。実現可能性という意味ではFlashの方が一歩、二歩先んじている。 FlashでSVGの挙動を再現する それならば、と考えた（恐らく）のがSVG Webだ。FlashがSVGをレンダリングできれば問題は一気に解消する。 今回紹介するオープンソース・ソフトウェアはSVG Web、FlashでSVGをレンダリングするソフトウェアだ。 SVG Webを使うとSVGで提供される文字の装飾や画像の表示、アニメーションなどがFlashで描けるようになる。ブラウザの種類によってネイティブなSVGかFlashによるものかを選択すれば良いだけだ。現状では本来のSVGに比べると若干ノイズがあるように感じられる。 動画の再生も可能 とは言え再現性は非常に高い。殆どのレンダリングが実
【レビュー】XULやSVGがクロスブラウザで動く!? 新感覚Ajaxフレームワーク"Ample SDK" (1) Ample SDK とは | エンタープライズ | マイコミジャーナル
あの処理がこのWebブラウザでも動いたら……デベロッパにとって、Webアプリケーションのクロスブラウザ対応化は頭を悩ませる作業のひとつ。最近ではさまざまなAjaxフレームワークが登場しクロスブラウザでの実装も楽になってきたが、このたびひときわ違ったアプローチを試みるAjaxフレームワークがリリースされた。レイアウトをXMLベースで記述し、XULやSVGをもクロスブラウザで動作させるライブラリ「Ample SDK」とは何か? Ample SDKはClientside OY社が開発/公開しているAjax GUI Frameworkライブラリ。Ample Runtimeと呼ばれる独自のランタイムを使用し、DOM CoreやDOM XPath、XInclude 1.0、SVG 1.2 Tiny、XUL(XML User Interface Language)といった機能をクロスブラウザで実現する(
SIE - ハイパーテキスト形式の画像用ライブラリ
Download SIE 33 sie33.zip (ZIP 357.3 KB) Requirements Edge, Internet Explorer11+, Mozilla Firefox44.0+, Opera33.0+, Safari3.0+ or Google Chrome3.0+ A HTTP Server Soft What's SIE The 'SIE' is an Open Source rendring engine written in JavaScript to display a W3C standard Scalable Vector Graphics (i.e. SVG). SVG is a language for drawing a vector graphics like HTML. It's used in Inkscape, Illustlator
Prototype Graphic Framework
Prototype Graphic Framework (PGF) is a framework based on prototype to display vectorial shapes inside a web browser. This library is licensed under a MIT-style license, so feel free to use it :). Introduction This open-source framework is developed for my new project NeoMeeting. I have already done a lot of work but sometimes quick-and-dirty. I will add them soon and frequently in this framewor
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mt4j.org