HTMLキャンバスライブラリで「PIEチャート」を作成しています。これを完了するには、PIEチャートの特定のセクションをクリックしてズームまたはスライスする必要があります。
上記の例外を除いて、PIEチャートはほぼ完成しました。
すでに利用可能なチャートライブラリの使用をお勧めしないでください
やりたいことを直接行うことはできません。キャンバスに描画するときは、キャンバス上に瞬時に乾くピクセルをペイントします。「ズームイン」する場合は、キャンバス(ctx.clearRect(...)
)を消去し、より多くのピクセルを使用して円グラフを再描画する必要があります。これは、 Canvasのような非保持描画モード(または即時描画モード)のグラフィックAPIに必要なものです。
これを、保持された描画モードのグラフィックシステムであるSVGと比較してください。このシステムでは、コンテンツを描画するコマンドによって、イベントを追跡したり、プロパティを調整したり、視覚的な結果が更新されたりする要素が作成されます。
arc
描画コマンドを変更する(半径を大きくlineWidth
するなど)か、コンテキストを変換して(縮尺と平行移動を変更)、同じ描画コマンドを再度発行することで、「ズームイン」(円グラフを大きく再描画)できます。
オプション以外のオプションも1つあります。キャンバスの属性width
とheight
属性を変更せずに、プロパティを変更すると、CSS
再描画せずにキャンバスを「ズームイン」できます。これにより、キャンバス上の各仮想ピクセルが画面上で拡大しますが、ピクセル化が発生します。height
width