タグ

svgとJavaScriptに関するcaretta2のブックマーク (6)

  • Frappe Charts - GitHub風グラフもあるSVGグラフライブラリ

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebはSVG/CanvasによってWeb標準だけで高度な表現が実現できるようになりました。しかし、それを使いこなすのは大変で、多くの場合ライブラリを使って実現しているでしょう。 今回紹介するFrappe ChartsはSVGを使ってグラフ表示を行うライブラリです。 Frappe Chartsの使い方 棒グラフ。マウスオーバーで情報を追加表示できます。 折れ線グラフ。 複数シリーズ出したパターン。 折れ線グラフにグラデーション。 データを動的に追加、削除できます。 色の塗り方も変えられます。 グラフと写真などのコンテンツを連動させるタイプ。 グラフのデータを選ぶと表示が変わります。 合計の表示、平均値表示を切り替え。 GitHub風のグラフ。 離すことも、くっつけることもできます。

    Frappe Charts - GitHub風グラフもあるSVGグラフライブラリ
  • Chartist – レスポンシブ対応のSVGグラフライブラリ

    Webは表現力が弱いと言われていますが、特にグラフ周りで苦労することが多いのではないでしょうか。データを単純に一覧表示するのではなく、グラフを用いることでトレンドを知ったり、よりビジュアル的に把握できるようになります。 そこで今回は最新のグラフライブラリ、Chartistを紹介します。SVGで描かれたレスポンシブなグラフライブラリです。 Chartistの使い方 シリーズをJavaScriptの配列で与えるだけ。とても簡単ですね。 ChartistはSVGでグラフを描き、スタイルシートでビジュアルを調整できます。さらにレスポンシブに対応することで幅によってラベルの表示を変更するようになっています。対応ブラウザはIE9以降となっています。 ChartistはJavaScript製のソフトウェア(ライセンスはWTFPL)です。 Chartist - Simple responsive char

    Chartist – レスポンシブ対応のSVGグラフライブラリ
  • 米Adobe、オープンソースのSVGコンテンツ用JavaScriptライブラリ「Snap.svg」を公開 | OSDN Magazine

    米Adobe Systemsは10月23日、SVGグラフィックスを操作するためのJavaScriptライブラリ「Snap.svg」をオープンソースソフトウェアとして公開した。プロジェクトのWebサイトより入手できる。 Snap.svgは、ベクター画像フォーマットであるSVGScalable Vector Graphics)で作成されたコンテンツを操作するためのライブラリ。ベクター画像をWebブラウザ上で作成するためのJavaScriptライブラリ「Raphaël」を作成したDmitry Baranovskiy氏が開発しており、jQueryによるDOM操作のように簡単にSVGデータを操作できることを目的としている。 Snap.svgではSVGコンテンツの生成および操作が可能で、既存のSVGコンテンツの操作も可能。マスキング、クリッピング、パターン、フルグラデーション、グループ化といったSV

    米Adobe、オープンソースのSVGコンテンツ用JavaScriptライブラリ「Snap.svg」を公開 | OSDN Magazine
  • IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT

    HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを

  • 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