Webサイトやダッシュボードで、円グラフをインタラクティブに操作できると便利ですよね。特に、数値を手入力するだけでなく、マウスカーソルで直感的に調整できると、ユーザーの操作性が向上します。 本記事では、jQueryのプラグイン 「jquery.knob.js」 を活用し、マウスカーソルのドラッグ操作や数値入力で円グラフをリアルタイムに調整する方法を解説します。デモページも用意しているので、ぜひ試しながら学んでみてください。 円グラフをマウスカーソル又は数値入力で調整表示するCSSの記述 ※円グラフエリア（div.demo）のCSS記述です。必要に応じて変更して下さい。 <style type="text/css"> body{ font-size: 16px; line-height: 1.4em; } h1{ text-align: center; font-size: 20px; pa
