2019年10月16日(水)

アナログ手書き風グラフを描いてくれるJavaScriptライブラリ「roughViz.js」

• 0
• 205
• 0
• 21

使い方

適当なidでdivを作ります。

html

あとは、JavaScripの部分をこう書くと。

new roughViz.Bar({ element: '#vis', data: { labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'], values: [10, 5, 8, 3, 2, 4, 7, 5, 3, 6] }, width: 700, stroke: '#666', strokeWidth: 2, color: '#4FBAFA', fillWeight: 1, padding: .3, roughness: 5 });

こんな感じになりました。

roughnessの値を上げるともっとラフになります。（ここまでくるとよくわからないけれども）

author:

web0pixel

http://www.webopixel.net/

Webディベロッパーのk.ishiwataさまのブログ。jQuery系の記事が人気な他、最近はスマホ対応やアプリなども取り上げられています。

オリジナルサイトで続きを読む

今日のwebデザイン記事ランキングを見る

         

‹ PREV

               

1つの要素で出来るユニークな背景パターン集・「1 element card background patterns」

         

NEXT ›

               

【デザイナー必見】UIデザインシステムの構築ガイド

関連記事

• GA4とは？【わかりやすく図解】初期設定から見るべき指標までわかる
• HTMLとCSSで勉強すべきことがしっかりまとめられている、アクセシビリティやパフォーマンスを考慮した実装を学べる良書 -モダンHTML＆CSS 現場の新標準ガイド
• Web制作者は要チェック！ 今回は盛りだくさん、Chrome 135で新しく追加された14個のCSSの機能
• 事前に用意されたコンポーネントとユーティリティクラスでワークフローを強化する軽量でモダンなCSSフレームワーク・「StyleXui」
• 書籍執筆しました！『CSSとJavaScriptで作る動くUIアイデアレシピ』

Ads

Webディベロッパーのk.ishiwataさまのブログ。jQuery系の記事が人気な他、最近はスマホ対応やアプリなども取り上げられています。web0pixelの記事『アナログ手書き風グラフを描いてくれるJavaScriptライブラリ「roughViz.js」』についてまとめています。

この記事は特にjavascriptについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のweb0pixelで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとweb0pixelの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。