手書き風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 実装方法 基本的には実装したい要素を指定して、装飾を指定し、
ちょっと面白いスクリプト！グラフやチャートを手書き風のラフな感じにするJavaScriptライブラリ -roughViz
手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。 グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。 roughViz.js -GitHub roughViz.jsの特徴 roughViz.jsのデモ roughViz.jsの使い方 roughViz.jsの特徴 roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。 グラフやチャートは、現在7種類に対応しています。 棒グラフ（垂直） 棒グラフ（水平） ドーナツ 折れ線グラフ 円グラフ 散布図
手書き風のチャートを実装できる非依存の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',
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
