アニメーションやグラフ等、SVGを使ったJavaScript＆jQueryプラグイン11
2016年11月24日 JavaScript, jQuery, SVG 今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。 ↑私が10年以上利用している会計ソフト！ ラインアート 1. DrawSVG See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen. Webサイト｜GitHub｜デモ SVGのパスを使ってラインをアニメーションさせるためのプラグイン。2kbと軽量です。デモ画面右下の「RETURN」ボタンをクリックして試してみてください。 var mySVG = $('#my_svg_element').draw
JavaScriptチャートライブラリを選ぶにあたって考えたこと - クックパッド開発者ブログ
こんにちは、トレンド調査ラボの井上寛之（@inohiro）です。 クックパッドの検索ログを基にした法人向けデータサービス「たべみる」の開発を担当しています。 本稿では、現在開発を行っているスマートフォン向けウェブアプリケーション（Rails）で採用した、 JavaScriptチャートライブラリを選定するにあたって検討した観点について述べます。 また、実際に採用したライブラリと、その利用例を簡単に紹介します。 ウェブ上に無数にあるJavaScriptチャートライブラリから、最適なものを一つ選択するのは なかなか難しい作業ではないかと考えています。おそらく、これから記述する条件を満たすライブラリは数多く存在し、 今回私が選択したライブラリ以上に良いものがあるのではないかと思います。 「何を以って良いライブラリとするか」という議論もまた難しい話題です。 そのようなライブラリについては、はてブコメ
円、線、棒グラフを描画できるシンプルなチャートライブラリ「cssCharts.js」:phpspot開発日誌
sultantarimo/cssCharts.js GitHub 円、線、棒グラフを描画できるシンプルなチャートライブラリ「cssCharts.js」 シンプルなグラフ描画とインタラクティブ機能があるのみのグラフライブラリ。多機能すぎるライブラリが苦手な場合はこういうのも便利そうです デザインがフラットな点も特徴。 関連エントリ かなり豊富な種類のグラフを描画できる「ECharts」 Analytics風のモダンでインタラクティブなグラフを描画できる「MetricsGraphics.js」 グラフも描けるスプレッドシート作成jQueryプラグイン「jQuery.sheet」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」
グラフも描けるスプレッドシート作成jQueryプラグイン「jQuery.sheet」:phpspot開発日誌
jQuery.sheet - The Ajax Spreadsheet グラフも描けるスプレッドシート作成jQueryプラグイン「jQuery.sheet」 超多機能でデータをAjaxで読み書きできるなど、なかなか凄そうなスプレッドシート作成ライブラリ。 タブを利用できたり、セルの修飾等もExcelっぽくて多機能。ブラウザ上で表計算機能が必要な場合の１選択肢として。 関連エントリ 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 一見普通のテーブルだけどExcel風に使えるjQueryプラグイン「Handsontable」
アニメーションつき円グラフを簡単実装！Circliful
「Circliful」は、の円グラフをアニメーションつきで表示できる jQuery プラグインです。カスタムデータ属性に値を渡すだけでグラフを簡単に描画でき、豊富なオプションでデザインをカスタマイズできます。ランディングページで製品のシェアを訴える際などにいいでしょう。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、CirclifulをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。 利用するWebページの body の閉じタグ直前で、jQuery本体と「Circliful のminifyファイル」、「jquery.circliful.min.js」を読み込みます。 //(中略) <script src
[JS]スクリプトだけでアニメーションするグラフ・チャートを実装する -Elycharts
デモ：マルチプル パイチャート パイチャートを組みあせたものです。 Elychartsの実装 外部ファイル 「jquery.js」とベクターグラフィックを扱うスクリプト「raphael.js」と当スクリプトを外部ファイルとして指定します。 <script src="jquery.js" type="text/javascript"></script> <script src="raphael.js" type="text/javascript"></script> <script src="elycharts.js" type="text/javascript"></script> HTML HTMLは空の容器をdiv要素で配置するだけです。 <div id="chart"></div> JavaScript 一つ目は、シンプルな折れ線グラフの例で紹介します。 $("#chart").ch
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
インタラクティブなグラフやチャートの為のjQueryプラグイン・「FusionCharts」
tableに書いたデータをGoogle Chartを使ってグラフ化する為のスクリプト・「Chartinator」
Tooltip for only first stack bar? · Issue #136 · HumbleSoftware/Flotr2
Horizontal bar chart? · Issue #73 · chartjs/Chart.js