手書き風UIを実装できるJavaScriptライブラリー
2022年2月15日 JavaScript, Webサイト制作 手書きのものってどこか温かみがあって親近感がわきますよね。今回はそんな手書き風のUIを実装できるJavaScriptライブラリーを紹介します！ ↑私が10年以上利用している会計ソフト！ Rough Notation Webサイト｜GitHub テキストの一部を強調したり、注釈を入れたいところに手書き風マーカーを追加できます。まさに今書いてます！というようなアニメーションも面白いですね。 導入方法 JavaScriptファイルで import { annotate } from 'https://unpkg.com/rough-notation?module'; または npm でインストールします。 npm install --save rough-notation 実装方法 基本的には実装したい要素を指定して、装飾を指定し、
)
billboard.js - D3.jsを用いた多彩なグラフライブラリ MOONGIFT
Web上でグラフを描きたいケースはとても多いです。そしてグラフは単に1種類知っておけばいいわけではなく、用途に合わせて最適なものを選ばないといけません。一つのライブラリだけで行うなら、なるべく多くの表示パターンに対応したものを使うべきでしょう。 今回紹介するbillboard.jsは一般的なグラフであれば、大抵こなせる強い味方です。覚えておくと使える場面が多そうです。 billboard.jsの使い方 主なグラフについて紹介していきます。まずは円グラフ。 オンマウスに対応しています。他のグラフも同様です。 エリアチャート。 エリアレンジチャート。 棒グラフ。 バブルチャート。 複合グラフ。 ドーナッツグラフ。 ゲージグラフ。 折れ線グラフ。 折れ線グラフですが、途中線種を変えています。 レーダーチャート。 散布図。 曲線グラフ。 積み重ねの棒グラフ。 ステップグラフ。 グリッドライン。 横
AnyGrids - 高機能なテーブル表示ライブラリ
業務システムで最もよく使うのが一覧でのデータ表示ではないでしょうか。多くはテーブルタグを使って構築しますが、ソートや表示するデータの多様さによって、より多機能を求められます。 今回紹介するAnyGridsはビジネスデータの表示に特化したライブラリとなっています。業務システムでのデータ表示に一役買ってくれそうです。 AnyGridsの使い方 デモです。アイコンやグラフを表示しています。 一つの行を複数段で表示できます。 ページネーション、ソートが備わっています。 グラフはマウスオーバーに対応しています。 AnyGridsの主な機能はページネーション、ソート、子供の行サポート、集計行、グラフ連携となっています。データ自体はJSONの配列で設定します。細かな表示部分を作り込まない分、実装が手軽になりそうです。 AnyGridsはJavaScript製のソフトウェア（ライセンスは独自）です。 An
ちょっと面白いスクリプト！グラフやチャートを手書き風のラフな感じにするJavaScriptライブラリ -roughViz
手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。 グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。 roughViz.js -GitHub roughViz.jsの特徴 roughViz.jsのデモ roughViz.jsの使い方 roughViz.jsの特徴 roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。 グラフやチャートは、現在7種類に対応しています。 棒グラフ（垂直） 棒グラフ（水平） ドーナツ 折れ線グラフ 円グラフ 散布図
uPlot - 大量のデータを高速に描画するグラフライブラリ MOONGIFT
チャートライブラリに求められるニーズはたくさんあります。使えるグラフの種類が多いこと、カスタマイズが容易なこと、リアルタイムデータにも使えることなどなどです。すべてをまかなえるライブラリは多くないので、目的に合わせてライブラリを使い分けるのが良いでしょう。 今回紹介するuPlotはとにかく大量のデータを即座に表示したいというニーズにマッチしています。 uPlotの使い方 デモです。16.6万ものポイントをプロットしています。 最初の表示時のみ、データをオンラインで取得してきますが、二回目以降のアクセスではキャッシュが有効になるようです。データさえ取得されれば、実際の表示は瞬時に行われます。表示はもちろん、その後のスクロールもスムーズです。 uPlotはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 leeoniya/uPlot: An exceptio
手書き風のチャートを実装できる非依存のJavaScriptライブラリ・「roughViz.js」
roughViz.jsは手書き風のチャートを作成できる非依存のJSライブラリです 他ライブラリを必要とせず単体で動作してくれます。チャートの種類も棒チャートやドーナツ、散布図、円チャート、折れ線などよく使われるものに対応されており、今後も増える予定があるそうです 実装方法も手軽で簡単、CSVにも対応しています 動作テスト 動作サンプルです。開発者さんが用意していたものをお借りしました。簡単に使えるので手書きじゃなくても便利そう <script src="https://unpkg.com/rough-viz@1.0.4"></script>↑ スクリプトを読み込みます。CDNあるのでまずはこれを使って試すとよさそうですね new roughViz.BarH( { element: '#vis0', title: "SNS foo bar", titleFontSize: '1.5rem',
d3.js v5をベースにしたチャートライブラリ・「Britecharts」
Britechartsはd3.jsのv5をベースにしたチャートライブラリです。チャートとコンポーネントを簡単に直感的に組み合わせる事が出来るのだそうです。リユースブルであり、シンプルなAPIを特徴としているのだそう。割と手軽な印象で学習コストは低くなりそうです。 動作サンプルがありましたのでお借りしました。 動作サンプル マウスホバーするとグラフと下部のデータが連動して動く、みたいなよくあるやつです。 正直、上のような簡単なチャートだけならもっと他にも軽量で簡単に使えるライブラリもありますのでBritechartsを使う必要性はないんですが、それなりのデータ量を扱うコンテンツでしたらあとで困らないように様々なケースに対応できるライブラリを選択しておいた方がよさげですね。 ざっくり手順<script src="https://cdnjs.cloudflare.com/ajax/libs/d3
[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。 スマホ向けのデザイン デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。 スマホに最適化されたパフォーマンス 軽量で、素晴らしいレンダリングのパフォーマンスを実現。 互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモ まずはスマホのアプリでよく見かける、美しいデザインと
![[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2](https://cdn-ak-scissors.b.st-hatena.com/image/square/38d845daa3306af6511040b4844ec0fb7250d64c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018083111.png)
billboard.js - インタラクティブ、プログラマブルなグラフライブラリ MOONGIFT
HTML5の表現力を活かすにはJavaScriptの活用が欠かせません。SVGやCanvasを使って図を描画することはできますが、JavaScriptを組み合わせることでよりインタラクティブにしたり、マウスイベントを使ったりできます。 今回紹介するのはbillboard.js、JavaScript製の再利用が容易なグラフライブラリです。 billboard.jsの使い方 グラフの一例です。 データをフィルタリングすると、他のデータが薄くなります。 折れ線グラフ。 タイムシリーズ。 曲線グラフ。 X軸の座標が異なるグラフ。 ステップグラフ。 エリアグラフ。 積み上げ型のエリアグラフ。 棒グラフ。 積み上げ型の棒グラフ。 散布図。 円グラフ。 ドーナッツグラフ。 ゲージグラフ。 複数のグラフの組み合わせ。 サブグラフ。 billboard.jsは表示に際してD3を使っています。そして、Java
Frappe Charts - GitHub風グラフもあるSVGグラフライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebはSVG/CanvasによってWeb標準だけで高度な表現が実現できるようになりました。しかし、それを使いこなすのは大変で、多くの場合ライブラリを使って実現しているでしょう。 今回紹介するFrappe ChartsはSVGを使ってグラフ表示を行うライブラリです。 Frappe Chartsの使い方 棒グラフ。マウスオーバーで情報を追加表示できます。 折れ線グラフ。 複数シリーズ出したパターン。 折れ線グラフにグラデーション。 データを動的に追加、削除できます。 色の塗り方も変えられます。 グラフと写真などのコンテンツを連動させるタイプ。 グラフのデータを選ぶと表示が変わります。 合計の表示、平均値表示を切り替え。 GitHub風のグラフ。 離すことも、くっつけることもできます。
Chartkick.js - 多数のグラフに対応したラッパーライブラリ MOONGIFT
Webシステムで一番苦労させられるのがグラフではないでしょうか。HTMLの表現力が上がったと言っても、コードを書かなければなりません。特にグラフやチャートになるとコード量も増えがちです。 そこで使ってみたいのがChartkick.jsです。多くのパターンに対応したクライアントサイドのグラフライブラリです。 Chartkick.jsの使い方 曲線のグラフ。 円グラフ。 ドーナッツグラフ。 棒グラフ。 横型。 エリアグラフ。 点だけのグラフ。 バブルチャート。 複数の要素を同時に。 横棒グラフでもできます。 横棒グラフで積み上げ型。 複数の要素でかつグルーピング。 色を変えた円グラフ。 データが一定でない要素同士でも。 10分ごとといった細かい単位でも。 細かい横棒グラフ。 Chartkick.jsは Chart.js、GoogleチャートそしてHighchartsに対応しており、これらのグラ
cssCharts.js - スタイルシートでグラフを描画 MOONGIFT
HTML5によってWebの表現力は高まっています。特にSVGやCanvasを使えば高度なグラフィックが描けます。ただし使いこなすのはそうそう簡単ではありません。そのため、まだまだスタイルシートの活躍の場はとても多いです。 そこで使ってみたいのがcssCharts.jsです。スタイルシートとJavaScriptを使って作られたグラフライブラリで、簡単に使いこなせるのが大きな利点です。 cssCharts.jsの使い方 cssCharts.jsの描けるグラフです。まずは棒グラフ。 次はドーナッツグラフ。 ドーナッツグラフの2つの値版。 さらに中央を塗りつぶしたバージョン。 次に折れ線グラフ。 塗りつぶしをなくした版。 もっとシンプルに。 そしてポイントも取り除いた版。 最後にパイチャート。 オンマウスでタイトルを表示することもできます。 例えば棒グラフの場合は次のように指定します。 <!--
Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
データを分かりやすくスタイリッシュに可視化できるJavascriptライブラリ「D3.js」
どんなに情報をまとめても、それを可視化して見ている人にうまく伝えるのは至難の技です。そんな時にデータをスタイリッシュかつ見やすいグラフにしてくれるのが、様々なデザインのJavascriptがダウンロード可能なライブラリ「D3.js」です。 D3.js - Data-Driven Documents http://d3js.org/ D3.jsを使って作ったグラフの事例を公式ギャラリーから見ることが可能で、これらのグラフにもとになる素材(スクリプトのソース)がGitHubで入手可能です。 Gallery · mbostock/d3 Wiki · GitHub デザインの一例は以下から。 ◆:Bubble Chart 作成例によっては、ページに直接コードが記載されているものもあります。 ◆:Four Ways to Slice Obama’s 2013 Budget Proposal - In
ファビコンに動的な円グラフを実装できるJSライブラリ・Piecon
ファビコンに動的な円グラフを実装 するJavaScriptライブラリ・Piecon のご紹介。ユニークなライブラリで すね。以前、ファビコンでテトリス を実装するライブラリを見かけまし たけど、今後増えるのかな。 なかなか面白い。ファビコンに動的な円グラフを表示させるスクリプトです。非依存型なのでPiecon単体で動作します。 ファビコンとして表示された円グラフは時間と共に変化させる事が出来ます。 Sample コードPiecon.setOptions({ color: '#ff0084', // グラフの色 background: '#bbb', // グラフの空部分(empty)の色 shadow: '#fff', // 外側の円のボーダー色 fallback: false // タイトルバーのパーセンテージの切り替え設定 });ライブラリを読み込んで上記のようにセッティングします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvas 2Dベースの高速で軽量、さまざまなタイプのチャートに対応できるオープンソースのチャートライブラリ・「μPlot」
)
Gantt Chart - SVG/Canvas/SSRをサポートしたガントチャート MOONGIFT
JavaScript製のオープンソースなガントチャートライブラリ・「Frappe Gantt」
Chart.js
IDEA * IDEA
