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' , legend: false , margin: {top: 50, bottom: 100, left: 160, right: 0}, data: { labels: [ 'Twitter' , 'hatena' , 'facebook' , 'Instagram' ], values: [8, 4, 6, 2] }, xLabel: 'Time Owned (Years)' , strokeWidth: 2, fillStyle: 'zigzag-line' , highlight: 'red' , } ); |
↑ チャートの種類を決めて初期化、タイトルやフォントサイズ、ラベルや数値などのデータを入力します
new roughViz.BarH( { element: '#vis1' , titleFontSize: '1.5rem' , data: 'foo.csv' , color: 'tan' , labels: 'name' , values: 'health' , title: "CSV example" , roughness: 4, } ); |
↑ CSVにも対応しています
< div id = "vis0" ></ div > |
↑ 空要素を用意すれば完成です。楽でいいですね
ライセンスはMITとの事(ライセンスファイルはありませんがGithubのReadmeの最下部に記載ありました)。日本語にすると手書き風フォントではなくなりますのでその辺は、必要に応じて便宜変更してください