人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

このURL先の円グラフをHTML5かCSS3で表現したいのですが
方法を教えて頂けますでしょうか?
http://www.city.ena.gifu.jp/pr/h20/4-1/img/yosa1.jpg

●質問者: makocan
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● holoholobird
●40ポイント

http://www.infragistics.com/products/jquery/sample/doughnut-chart/bind-to-collection
jqueryとhtml5を使うと、このようなグラフを作成することができます。

あとは各要素を代入すれば完成です。


2 ● cx20
●40ポイント

JavaScript 投稿サイト CodePen に Highcharts.js ライブラリを使用した円グラフサンプルがありました。

■ Demo of Double-Depth Highcharts.js Pie Chart - CodePen
http://codepen.io/akhbar/pen/yifbG

ライブラリの日本語説明は、以下が参考になるかと思います。

■ 【初心者用】 Highchartsの使い方1 Highchartsの表示方法 -
http://frequ2156.blog.fc2.com/blog-entry-42.html


※ 2013.07.13 16:48 追記
サンプルを書いてみました。

■ Highcharts.js でグラフを書いてみるテスト
http://jsdo.it/cx20/pDXW


3 ● エネゴリ
●40ポイント

こちらのリンクから円グラフが作れます
http://www.html5.jp/library/graph_circle.html
CSSで簡単な円グラフならこちら
http://feed.designlinkdatabase.net/feed/outsite_1317.aspx
ほか
http://liginc.co.jp/designer/archives/6023


4 ● だわかき
●40ポイント

HTML5 × Chart.jsで円グラフを描く(オプション指定方法)
http://www.visualthinking.jp/archives/13463


5 ● boost_beast
●40ポイント

http://www.html5.jp/library/graph_circle.html
http://www.visualthinking.jp/archives/13390
このへんを参考にしてみてください。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ