web-dev-qa-db-ja.com

CSSで円グラフを作成する方法

以下のようなCSSで円グラフを作成するにはどうすればよいですか？

enter image description here

css
20
Rohit Azad

あら！ Google Chart Toolsを見たことがありますか？

https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

これは愚かな実装が簡単ですが、私の問題は「外部API」の部分です。グーグルがこれをできると決めた場合、またはグーグルがダウンした場合、バイバイチャート！しかし、美しさと他のチャートの選択に関する限り、グーグルチャートはちょっとクールな発見です。

11
Savanetech

私は this 最も簡単なCSSのみのソリューションを見つけます。以下は多少簡略化されています。

    .pieContainer {
      height: 150px;
      position: relative;
    }
    
    .pieBackground {
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 100%;
      box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
    } 
    
    .pie {
      transition: all 1s;
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 100%;
      clip: rect(0px, 75px, 150px, 0px);
    }
    
    .hold {
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 100%;
      clip: rect(0px, 150px, 150px, 75px);
    }
    
    #pieSlice1 .pie {
      background-color: #1b458b;
      transform:rotate(30deg);
    }
    
    #pieSlice2 {
      transform: rotate(30deg);
    }
    
    #pieSlice2 .pie {
      background-color: #0a0;
      transform: rotate(60deg);
    }
    
    #pieSlice3 {
      transform: rotate(90deg);
    }
    
    #pieSlice3 .pie {
      background-color: #f80;
      transform: rotate(120deg);
    }
    
    #pieSlice4 {
      transform: rotate(210deg);
    }
    
    #pieSlice4 .pie {
      background-color: #08f;
      transform: rotate(10deg);
    }
    
    #pieSlice5 {
      transform: rotate(220deg);
    }
    
    #pieSlice5 .pie {
      background-color: #a04;
      transform: rotate(70deg);
    }
    
    #pieSlice6 {
      transform: rotate(290deg);
    }
    
    #pieSlice6 .pie {
      background-color: #ffd700;
      transform: rotate(70deg);
    }
    
    .innerCircle {
      position: absolute;
      width: 120px;
      height: 120px;
      background-color: #444;
      border-radius: 100%;
      top: 15px;
      left: 15px; 
      box-shadow: 0px 0px 8px rgba(0,0,0,0.5) inset;
      color: white;
    }
    .innerCircle .content {
      position: absolute;
      display: block;
      width: 120px;
      top: 30px;
      left: 0;
      text-align: center;
      font-size: 14px;
    }
    <div class="pieContainer">
      <div class="pieBackground"></div>
      <div id="pieSlice1" class="hold"><div class="pie"></div></div>
      <div id="pieSlice2" class="hold"><div class="pie"></div></div>
      <div id="pieSlice3" class="hold"><div class="pie"></div></div>
      <div id="pieSlice4" class="hold"><div class="pie"></div></div>
      <div id="pieSlice5" class="hold"><div class="pie"></div></div>
      <div id="pieSlice6" class="hold"><div class="pie"></div></div>
      <div class="innerCircle"><div class="content"><b>Data</b><br>from 16<sup>th</sup> April, 2014</div></div>
    </div>
7
MastaBaba

Google Developers Toolを選択している人がいるのを見ました。非常にタフで、JSも使用していて、CSSだけが必要です。これが最も簡単な方法Pure CSSで、背景のグラデーションを使用して作成されます。

.pie {
  width: 400px;
  height: 400px;
  background-image: conic-gradient(orange 64%, blue 17%, black);
  border-radius: 50%
}
<div class="pie"></div>
4
Aaditya Pandey

私の知る限り、css3ではこれは（まだ）不可能です。ただし、新しいhtml5 canvas要素は、必要なすべてを提供します。 JavaScriptを介して簡単にアクセスおよび使用できます。基本的な使用法に関する小さなチュートリアルが here にあります。

Stackoverflowに関する他の質問も同じトピックに関するものでした。 "HTML5 Canvas pie chart" を参照してください。 （ "HTML5 Canvas要素のグラフ化データパートIVシンプルな円グラフ" は、canvas要素を使用した円グラフに関するチュートリアルの最初の回答にあります）

2
s1lence

同じスレッドを検索しているときに、このスレッドで偶然見つけました。これまでに見つけた https://keithclark.co.uk/articles/single-element-pure-css-pie-charts/ は、純粋なCSSで動的に生成されたパイのCSSを作成する方法を説明しています。 https://caniuse.com/#search=conic-gradient によると、これはまだそれほど広くサポートされていません。マスタババからの解決策は別の選択肢ですが、私にはそれを「ライブラリ」にするために多くの調整が必要と思われ、内側の円を削除すると少し厄介に見えます。

1
Simbiat

純粋なCSSまたはJavaScriptを使用して、これらのパイを構築する方法を探していました。今日、私は SmashingMagazine についての記事を見つけました。これは トークからLea Verou を指し、彼女は主題を完全に釘付けにしています。それは本当に、本当に見る価値があります！

1
rafaelbiten

円錐勾配と呼ばれる1つの単純なプロパティで簡単に作成できます。

https://css-tricks.com/snippets/css/css-conic-gradient/

0
user12944382