Ваши данные
Вставьте таблицу прямо из Excel или Google Таблиц либо перетащите CSV-файл. Никуда ничего не загружается — весь расчёт идёт внутри этой вкладки браузера.
CSV, TSV или обычный текст. Файлы в windows-1251 распознаются и перечитываются автоматически, поэтому кириллица в заголовках не превращается в кракозябры.
Настройки разбора
Столбцы
Результат
Сохранить и поделиться
Библиотека отрисовки скачивается только при нажатии кнопки и только на этой странице.
Все вычисления выполняются локально в браузере: разбор, график, экспорт. Если отключите сеть, страница продолжит работать.
Факты и границы применимости
| Для чего подходит | Один итог, разложенный на несколько частей, показанный однократно |
|---|---|
| Ограничение по секторам | Двенадцать; всё сверх того автоматически сворачивается в сектор «Прочее» |
| Идеальное число | от 2 до 6 секторов |
| Отрицательные значения | Игнорируются — доля целого не может быть отрицательной |
| Отверстие в центре | 58% радиуса, середина освобождается под итог |
| Сортировка | Секторы отсортированы по убыванию — это единственный порядок, который читатель может проследить |
| Что на выходе | PNG в двойном разрешении плюс CSV и JSON со значениями и процентами |
Когда этот метод вводит в заблуждение
- Углы — самое трудное для оценки визуальное кодирование. Высоты столбцов читатель ранжирует почти безошибочно, а секторы круга — лишь приблизительно. Поэтому любое серьёзное руководство советует столбчатую диаграмму, если только мысль «часть целого» не является всем смыслом картинки.
- Убирая центр, вы убираете и вершину каждого сектора, поэтому читатель оценивает длину дуги, а не угол. Исследования расходятся в том, лучше это или хуже; в любом случае это не точнее столбчатой диаграммы.
- Отверстие соблазняет вписать в него крупное число, и это число потом доминирует над всей картинкой. Если итог и есть сообщение, подумайте, нужно ли вам кольцо вообще.
- Во всём остальном действуют те же ограничения, что и у круговой: никакого изменения во времени, никаких отрицательных значений, никакого надёжного сравнения похожих секторов.
Как это считается
Построение полностью совпадает с круговой диаграммой: та же сортировка, тот же потолок в двенадцать секторов с автоматическим сворачиванием в «Прочее», та же обработка пустых и отрицательных значений. Отличие одно — вырез, зафиксированный на 58% радиуса.
Эти 58% выбраны так, чтобы кольцо оставалось достаточно толстым для цвета и достаточно тонким, чтобы отверстие было пригодным. Тоньше — и мелкие секторы превращаются в щепки; толще — и это круговая с точкой посередине.
Итог выводится над диаграммой, а не внутри отверстия. Текст, нарисованный внутри canvas, нельзя выделить, перевести или прочитать программой экранного доступа, поэтому он живёт в самой странице: отверстие остаётся пустым, а число — полезным.
Проценты в выгрузке считаются от суммы нарисованных секторов, а она после сворачивания по-прежнему равна полному итогу: сектор «Прочее» несёт сумму всего, что в него объединили.
Вопросы и ответы
Кольцевая лучше или хуже круговой?
Практически равноценна. Отверстие делает диаграмму чуть компактнее и даёт место для итога. Ни та, ни другая не точнее столбчатой, когда читателю нужно точно сравнить части.
Можно вписать текст в середину?
На холсте — нет, и намеренно. Текст, нарисованный внутри изображения диаграммы, нельзя скопировать, перевести или озвучить вспомогательной технологией. Итог печатается над диаграммой, где остаётся настоящим текстом.
Сколько секторов, прежде чем всё сломается?
Те же двенадцать, что и у круговой, и даже это щедро. По-настоящему формат работает на двух-шести.
Почему моя самая маленькая категория не появилась?
Либо она была нулевой или пустой и её пропустили, либо её свернули в «Прочее» вместе с остальным хвостом. Подпись под диаграммой сообщает, что именно произошло.
Что-нибудь загружается?
Нет. У страницы вообще нет серверной части.