円グラフの描画についての所感

試した手法

• conic-gradient
• SVG(circle＋stroke-dasharray)

conic-gradient

▼FireFox

firefoxで小数点以下の細かい数値の描画が出来ない。
また、数値と揃わず幅が異様に太かったりする。
精密な描画に向かない。
「小数点以下の数値を描画しなくてOK」という仕様でない限り、使わない方が良い。

▼safari,chrome,Edge

小数点以下の数値が含まれる場合、ウィンドウサイズによっては隙間が出来る。
現時点でのブラウザの限界と思われる。
許容範囲かどうかを事前に確認した方が良い。

SVG (circle + stroke-dasharray)

参考：https://qiita.com/super-mana-chan/items/d5b16a550de06a70a718

▼safari

小数点以下の数値の細かい描画がおかしい。ずれる。
「精密な描画を必要としない場合」以外は使用しない方が良い。

まとめ

conic-gradientもSVG(circle＋stroke-dasharray)も精密な描画に向かない印象。
D3.jsやchart.js等のライブラリを使用するのが良いのかもしれない。
D3はcircle＋stroke-dasharrayで描画しているわけではなく、ベクターの細かい数値で描画していると思うので細かい数値の描画可能になると思われる？
時間があるときに試してみたい。