鮮やかなグラフを簡単に描画！JavaScript「Chart.js」を使った動的なグラフ・チャートの作り方
グラフを使うと、あらゆる要素が客観的に比較できるので、問題分析が容易になったり、根拠を示しやすくなります。最近では情報やデータを可視化したインフォグラフィックを見かける場面が多いですが、それもグラフのメリットを活かしたものです。 しかし、グラフをホームページに掲載する時に、いちいち画像を作成するのは面倒……だと感じたことありませんか。 そこで今回は、グラフやチャートをJavaScriptで動的に生成することができるChat.jsを紹介します。 Chart.jsを使えば、数行のコードを書くだけで、鮮やかなグラフを簡単に描画することができます。少しのステップで実装することができるので、実際に特徴や手順から確認してみましょう。 Chart.jsとは？ http://www.chartjs.org Chart.jsは、数行のコードで折れ線グラフや棒グラフ、円グラフやレーダーチャートなどをダイナミッ
interact.js - JavaScript drag and drop, resizing and multi-touch gestures for modern browsers
JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers (and also IE9+) Free and open sourcePowerful snap and restriction modifiersInertial throwingMultiple simultaneous interactionsUnified API for touch and mouse eventsAuto scrollSupport for HTML and SVG Free and open sourcePowerful snap and restriction modifiersInertial throwingMultiple simultaneous interactionsUnified A
【備忘録】SVGのpathをJavaScriptでぬるぬる動かしたかった | ユガラボ
こちらは、最近流行りのSVG！gif画像ではありません。 クリックして色を変えるなどの処理がリアルタイムで行えます。 IEやsafariなど一部のブラウザではうまく動作しないかもしれません。ゴメンナサイ。 これをjavascriptで制御しようとしたところ、いろいろ大変だった話。 ※この記事は、SVGが動作する環境の方へ向けて書いています。動かない方はゴメンナサイ。 SVGは、ドットの集まりではなく、パス(点と線)の集まりである為、解像度は無限大です！ また、パスの値は数値で書かれていて、ページが表示されてからでも、パスの値を調節すれば、見た目をぐにぐに変えちゃったりもできます！ ただし、現時点ではブラウザによって対応していない環境があったり、大きさの指定がややこしかったりと、いろいろ課題もございます。 今回は、どうしてもSVGをぬるぬる動かしたい！という案件がございまして、工数はかかりま
ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
21 Best JavaScript Frameworks for Web Developers 2023
