スケッチ アプリがドーナツ チャートを生成する方法に問題はほとんどありません。
これは、Sketch アプリでドーナツ チャートを作成する方法です
スクリーンショットを参照してください。
- 200px × 200px の円を作成しました
- 空塗り。ストローク 25 (センター ポジション)。これは空の州の円になるので、グレーに色付けします
- この基本円を複製して、50% の最初のセグメントを作成しました (合計 3、50%、25%、25%)。
- 50% の最初のセグメントでは、「ダッシュ」の長さは 314 です。ダッシュは 6 時の位置から引き出され、反時計回りに移動しているように見えます (これは他のセグメントでより明白になります)。ただし、12 時から開始して時計回りに移動する方がはるかに好みです。
- 円を複製して 25% の 2 番目のセグメントを作成します。これは、157 の「ダッシュ」と 471 の「ギャップ」に相当します。
- 円ストロークの描画方法 (ポイント 4 を参照) のため、90 度の変換を適用しました
- 最後のセグメントについては、2 番目のセグメントと同様ですが、180 度の変換のみが異なります。
生成された SVG は、Sketch Questions で描かれたものを表していません。
- 最終的な SVG が Sketch アプリで設計どおりに見えるようにする方法
- スケッチでは、ストロークが 12 時の位置から開始され (変換を使用していると思いますか?)、時計回りに描画されるようにする方法を説明します。
Sketch によって生成されたコード ( https://jsfiddle.net/BrightPixels/932w6j9d/ )
<?xml version="1.0" encoding="UTF-8"?>
<svg width="226px" height="226px" viewBox="0 0 226 226" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
<title>donut-chart</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="iPad" transform="translate(-236.000000, -213.000000)" stroke-width="25">
<g id="donut-chart" transform="translate(249.000000, 226.000000)">
<circle id="base" stroke="#D8D8D8" cx="100" cy="100" r="100"></circle>
<circle id="segment1" stroke="#FFD900" stroke-dasharray="314,314" cx="100" cy="100" r="100"></circle>
<circle id="segment2" stroke="#64B445" stroke-dasharray="157,471" transform="translate(100.000000, 100.000000) rotate(90.000000) translate(-100.000000, -100.000000) " cx="100" cy="100" r="100"></circle>
<circle id="segment3" stroke="#004FB6" stroke-dasharray="157,471" transform="translate(100.000000, 100.000000) rotate(180.000000) translate(-100.000000, -100.000000) " cx="100" cy="100" r="100"></circle>
</g>
</g>
</g>
</svg>