Как сделать круговую диаграмму в CSS

Ответ 1

О, мой! Вы видели инструменты Google Chart?

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

Это глупо легко реализовать, но моя проблема с ним - это "внешняя часть api". Если Google решает, может ли это или google уходит, пока до свидания! Но что касается красоты и выбора других графиков, диаграммы google - это классная находка.

Ответ 2

Я считаю, что это самое простое решение только для 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>

Ответ 3

Я видел, как некоторые люди выбирают 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

Насколько я знаю, это пока невозможно (css3). Однако новый элемент html5 canvas предоставляет все, что вам нужно. Его можно легко получить и использовать над javascript. Небольшой учебник по базовому использованию можно найти здесь.

Другой вопрос о stackoverflow даже был в той же теме. См. "Круговая диаграмма холста HTML5" . (Существует "Графические данные в HTML5 Canvas Element Part IV Simple Pie Charts" в первом ответе на учебник о круговых диаграммах с использованием элементов холста )

Ответ 5

Я искал способы создания этих пирогов, используя чистый CSS или даже используя Javascript. Сегодня я нашел статью о SmashingMagazine, которая указывает на поговорите с Lea Verou, где она полностью приклеивает тему. Это действительно, действительно стоит смотреть!

Ответ 6

Наткнулся на эту ветку, пока ищу такую же. До сих пор я нашел https://keithclark.co.uk/articles/single-element-pure-css-pie-charts/, который объясняет, как можно написать даже CSS для динамически генерируемых пирогов на чистом CSS. Проблема в том, что используется конический градиент, который, согласно https://caniuse.com/#search=conic-gradient, пока не так широко поддерживается. Решение от Mastababa - еще одна альтернатива, но, мне кажется, вам потребуется много настроек, чтобы превратить ее в "библиотеку", и если вы удалите внутренний круг, это будет выглядеть немного неловко.