注目キーワード
  1. Wordpress
  2. テーマ
  3. プラグイン
  4. SEO
  5. 集客

手書き風のチャートを実装できる非依存のJavaScriptライブラリ・「roughViz.js」


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の最下部に記載ありました)。日本語にすると手書き風フォントではなくなりますのでその辺は、必要に応じて便宜変更してください

roughViz.js

#wordpress #ワードプレス #SEO #集客

「かちびと.net」を閲覧する

最新情報をチェックしよう!
>WordPressに関連する情報まとめ

WordPressに関連する情報まとめ

ブログ / ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。当サイトを見て、まずはトライしてみましょう!

CTR IMG