小さいことはいいことだ。小さいグラフに特化したフリーのjsチャートライブラリ3選。ウェブ技術が好きjavascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログこの広告は、90日以上更新していないブログに表示しています。2016-07-21小さいことはいいことだ。小さいグラフに特化したフリーのjsチャートライブラリ3選。ウェブデザイン写真はうちのみーこ。スマホでも見やすいグラフを使う機会があるプログラマ・デザイナーの皆さまへ。小さいグラフを綺麗に描画できるJavascriptのライブラリを紹介します。Peityhttp://benpickles.github.io/peity/HTMLの要素をSVGの小さいチャートに変換してくれる使い易いライブラリです。これだけでパイチャートを描画できます。MetricsGraphics.jsmetricsgraphicsjs.orgMozillaが開発している日付をX軸としたタイムラインチャートに特化しているライブラリです。Javascriptでオプションを指定してチャートを描画します。});});オプションをオフにしていくと線だけのスパークラインも可能です。SparklinesjQueryを冠に付けた小ささに特化したチャートライブラリです。Sparklines(スパークライン)と銘打っていますがパイチャートやバーチャート等も揃っています。</script>jQueryに依存canvasで描画3年程メンテされてないので使う時はGitHubを見て(https://github.com/gwatts/jquery.sparkline/)メンテナンスされているフォークを探して使った方が良いかも。小さく描画するコツラインチャートなどXY軸(Axis)があるチャートは非表示にするか片方だけ表示する。SVG内での余白を確認して消すか小さくする。凡例(Legend)があれば非表示するか、チャート外のHTMLで描画する。枠で囲まれていると狭く感じるので外枠をできるだけ減らす。使って自作するのそんなに大変ではないので、お気に入りのライブラリが見つからなければ自作する方が速いかも知れません。他にはSVGのpath/rect/polygonタグ等を使って自力でチャートを組み立てる方法もあります。ここで挙げたライブラリで描画されたチャートをカスタマイズする時にはSVGやCanvasの仕組みを見ながら作業する事になるので、SVGやCanvasに慣れていないと大変だったりします。12:23小さいことはいいことだ。小さいグラフに特化したフリーのjsチャートライブラリ3選。写真はおもちゃに高速アタックするうちのみーこ。サイト制作でよく使われる以下のライブラ...2016-07-29夏だしダイエットしたいから痩せれるウェブアプリを作った写真はうちのみーこ。今年も夏がやってきました。bjimmy934WEBサイト制作会社やWEBインテグレーシ...2015-07-03D3でビジュアライゼーション好きのみんなに朗報。&quot;awesome-d3&quot;が登場。月別アーカイブはてなブログをはじめよう!tkosugaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。