Учебники

DC.js — круговая диаграмма

Август 31, 2018

Круговая диаграмма представляет собой круговой статистический график. Это разделено на части, чтобы показать числовую пропорцию. В этой главе подробно описывается, как нарисовать круговую диаграмму с использованием DC.js.

Методы круговой диаграммы

Прежде чем приступить к рисованию круговой диаграммы, мы должны понять класс dc.pieChart и его методы. В dc.pieChart используются миксины для получения основных функций рисования диаграммы. Миксины, используемые dc.pieChart, следующие:

  • baseMixin
  • capMixin
  • colorMixin

Полная диаграмма классов dc.pieChart выглядит следующим образом:

Методы круговой диаграммы

Dc.pieChart получает все методы указанных выше миксинов, а также имеет свои собственные методы для точного построения круговой диаграммы. Они заключаются в следующем —

  • cx ([cx])
  • drawPaths ([путь])
  • emptyTitle ([название])
  • externalLabels ([ярлык])
  • innerRadius ([innerRadius])
  • minAngleForLabel ([minAngleForLabel])
  • радиус ([радиус])
  • slicesCap ([cap])

Давайте обсудим каждый из них в деталях.

cx ([cx])

Он используется для получения или установки координаты центра х, которая определена ниже — 

chart.cx = function (cx) {
   if (!arguments.length) {
      return (_cx ||  _chart.width() / 2);
   }
};

Точно так же вы можете выполнить координату Y.

drawPaths ([путь])

Этот метод используется для рисования путей для круговой диаграммы и определен ниже — 

chart.drawPaths = function (path) {
   if (arguments.length === 0) {
      return path;
   }
};

emptyTitle ([название])

Этот метод используется для установки заголовка, когда нет данных. Это определено ниже — 

chart.emptyTitle = function (title) {
   if (arguments.length === 0) {
      return title;
   }
};

externalLabels ([ярлык])

Он используется для позиционирования меток среза со смещением от внешнего края диаграммы. Это определено ниже — 

chart.externalLabels = function (label) {
   if (arguments.length === 0) {
      return label;
   } 
};

innerRadius ([innerRadius])

Этот метод используется для получения или установки внутреннего радиуса круговой диаграммы. Если внутренний радиус больше 0px , то круговая диаграмма будет отображаться как кольцевая диаграмма. Это определено ниже — 

_chart.innerRadius = function (innerRadius) {
   if (!arguments.length) {
      return _innerRadius;
   }
};

minAngleForLabel ([minAngleForLabel])

Этот метод используется для получения или установки минимального угла среза для отрисовки метки. Это определено ниже — 

 _chart.minAngleForLabel = function (minAngleForLabel) {
   if (!arguments.length) {
      return _minAngleForLabel;
   }
   _minAngleForLabel = minAngleForLabel;
   return _chart;
};

радиус ([радиус])

Этот метод используется для получения или установки внешнего радиуса. Если радиус не указан, то он займет половину минимальной ширины и высоты диаграммы. Это определено ниже — 

_chart.radius = function (radius) {
   if (!arguments.length) {
      return _givenRadius;
   }
   _givenRadius = radius;
   return _chart;
};

slicesCap ([cap])

Получает или задает максимальное количество срезов, которые сгенерирует круговая диаграмма. Верхние срезы определяются значением от высокого до низкого. Другие срезы, превышающие верхний предел, будут свернуты в один срез «Другие».

Нарисуйте круговую диаграмму

Давайте создадим круговую диаграмму в DC. В этом примере круговой диаграммы давайте возьмем набор данных с именем people.csv . Пример файла данных выглядит следующим образом: 

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

....................
....................
....................

Приведенный выше пример содержит много записей. Вы можете скачать файл, щелкнув по следующей ссылке, и сохранить его в папке DC.

people.csv

Теперь давайте придерживаться следующих шагов, чтобы нарисовать круговую диаграмму в DC.

Шаг 1. Включите скрипт

Давайте добавим D3, DC и Crossfilter, используя следующий код — 

<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>

Шаг 2: Определите переменную

Создайте объект типа dc.pieChart, как показано ниже — 

var pieChart = dc.pieChart('#pie');

Здесь идентификатор пирога отображается с помощью пирога.

Шаг 3: Чтение данных

Прочитайте ваши данные (скажем, из people.csv) с помощью функции d3.csv () . Это определяется следующим образом — 

d3.csv("data/people.csv", function(errors, people) {
   console.log(people);
}

Здесь, если файл данных недоступен в указанном месте, функция d3.csv () возвращает ошибку.

Шаг 4: Определите перекрестный фильтр

Определите переменную для Crossfilter и назначьте данные для Crossfilter. Это определено ниже — 

var mycrossfilter = crossfilter(people);

Шаг 5: Создайте измерение

Создайте измерение для пола, используя функцию ниже — 

var genderDimension = mycrossfilter.dimension(function(data) { 
   return data.gender; 
});

Здесь Пол людей используется для измерения.

Шаг 6: ReduceCount ()

Создайте группу Crossfilter, применив group () и функцию reduCount () к созданному выше гендерному измерению — groupDimension . 

var genderGroup = genderDimension.group().reduceCount();

Шаг 7: создать пирог

Генерация пирога с помощью функции ниже — 

pieChart
   .width(800)
   .height(300)
   .dimension(genderDimension)
   .group(genderGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

dc.renderAll();

Вот,

  • Ширина круговой диаграммы установлена ​​на 800.

  • Высота круговой диаграммы установлена ​​на 300.

  • Измерение круговой диаграммы устанавливается на гендерное измерение с использованием метода dimension ().

  • Группа круговой диаграммы устанавливается на гендерную группу с помощью метода group ().

  • Добавлено событие click для регистрации данных с помощью встроенного события DC.js renderlet () . Рендлет вызывается всякий раз, когда диаграмма отображается или рисуется.

Ширина круговой диаграммы установлена ​​на 800.

Высота круговой диаграммы установлена ​​на 300.

Измерение круговой диаграммы устанавливается на гендерное измерение с использованием метода dimension ().

Группа круговой диаграммы устанавливается на гендерную группу с помощью метода group ().

Добавлено событие click для регистрации данных с помощью встроенного события DC.js renderlet () . Рендлет вызывается всякий раз, когда диаграмма отображается или рисуется.

Шаг 8: Рабочий пример

Создайте новый HTML-файл pie.html и включите все вышеперечисленные шаги, как показано ниже: 

<html>
   <head>
      <title>DC.js Pie Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "pie"></div>
      </div>

      <script language = "javascript">
         var pieChart = dc.pieChart('#pie');

         d3.csv("data/people.csv", function(errors, people) {
            console.log(people);
            var mycrossfilter = crossfilter(people);

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

            pieChart
               .width(800)
               .height(300)
               .dimension(genderDimension)
               .group(genderGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });

            dc.renderAll();
         });
      </script>
   </body>
</html>

Теперь запросите браузер, и мы увидим следующий ответ.

54
Share: