絶対まねしたい！Chart.jsを使ってフラットデザインぽいグラフを作る方法 | startapp
Chart.jsというのが流行っているみたいなので、もうちょっとフラット感がでないものか、カスタマイズに挑戦してみました。Chart.jsの使い方などは、LIGさんの記事を参考にしてください。 ドーナッツ これを何個か並べればかなりフラット感が出ますね。外側の青い部分のみをChart.jsで描画し、それ以外はCSSで調整しています。2つ目のセグメントを背景色で塗れば、円弧のように見えます。 ※ ドーナッツの幅は、percentageInnerCutout で調整できます。 ラインチャート お次は棒グラフです。フラットに見せるポイントは、グラフや線などを簡略化することでイラストのように見せるところです。また、数字と組みあわせるとかっこ良く見えます。※ 数字の部分は、CSSで組んでいます。 ※ 横軸のラベルは、意図的に減らしています。 バーチャート 棒グラフもフラットにしてみました。こちらも数
水量・温度・メーター等、産業用のグラフを描画できるjQueryプラグイン「Industrial.js」:phpspot開発日誌
Industrial.js 水量・温度・メーター等、産業用のグラフを描画できるjQueryプラグイン「Industrial.js」 グラフ描画ライブラリは色々ありますが、こういうのは珍しいかもしれません。産業用のWEBシステム以外にもダッシュボード等で色々と使えるかもしれませんね。 どういう仕事がはいってくるかもしれない、というWEB製作者の方は覚えておいてもよいかも 関連エントリ どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 テーブルをグラフに変換してくれるjQueryプラグイン 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
