DC.js - wykres kołowy

Wykres kołowy to okrągły wykres statystyczny. Jest podzielony na plasterki, aby pokazać proporcje liczbowe. W tym rozdziale wyjaśniono szczegółowo, jak narysować wykres kołowy za pomocą DC.js.

Metody wykresów kołowych

Zanim przejdziemy do rysowania wykresu kołowego, powinniśmy zrozumieć dc.pieChartklasa i jej metody. Dc.pieChart używa mixinów, aby uzyskać podstawową funkcjonalność rysowania wykresu. Miksy używane przez dc.pieChart są następujące -

baseMixin
capMixin
colorMixin

Pełny diagram klas dc.pieChart jest następujący -

Dc.pieChart pobiera wszystkie metody z powyższych mikserów, a także ma własne metody do rysowania wykresu kołowego. Są następujące -

cx ([cx])
drawPaths ([ścieżka])
emptyTitle ([tytuł])
externalLabels ([etykieta])
innerRadius ([innerRadius])
minAngleForLabel ([minAngleForLabel])
promień ([promień])
slicesCap ([czapka])

Omówmy szczegółowo każdy z nich.

cx ([cx])

Służy do pobierania lub ustawiania położenia współrzędnej środka x, która jest zdefiniowana poniżej -

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

Podobnie możesz wykonać położenie współrzędnej y.

drawPaths ([ścieżka])

Ta metoda jest używana do rysowania ścieżek dla wykresu kołowego i została zdefiniowana poniżej -

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

emptyTitle ([tytuł])

Ta metoda służy do ustawiania tytułu, gdy nie ma danych. Jest zdefiniowany poniżej -

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

externalLabels ([etykieta])

Służy do pozycjonowania etykiet wycinków z przesunięciem od zewnętrznej krawędzi wykresu. Jest zdefiniowany poniżej -

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

innerRadius ([innerRadius])

Ta metoda służy do pobierania lub ustawiania wewnętrznego promienia wykresu kołowego. Jeśli promień wewnętrzny jest większy niż0px, wykres kołowy zostanie wyrenderowany jako wykres pierścieniowy. Jest zdefiniowany poniżej -

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

minAngleForLabel ([minAngleForLabel])

Ta metoda służy do pobierania lub ustawiania minimalnego kąta wycinka na potrzeby renderowania etykiet. Jest zdefiniowany poniżej -

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

promień ([promień])

Ta metoda służy do pobierania lub ustawiania promienia zewnętrznego. Jeśli promień nie zostanie określony, zajmie połowę minimalnej szerokości i wysokości wykresu. Jest zdefiniowany poniżej -

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

slicesCap ([czapka])

Pobiera lub ustawia maksymalną liczbę wycinków, które wygeneruje wykres kołowy. Najlepsze wycinki są określane przez wartość od wysokiej do niskiej. Inne plasterki przekraczające limit zostaną zwinięte w jeden plaster „Inne”.

Narysuj wykres kołowy

Utwórzmy wykres kołowy w DC. W tym przykładzie wykresu kołowego weźmy zbiór danych o nazwiepeople.csvplik. Przykładowy plik danych jest następujący -

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

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

Powyższy przykład zawiera wiele rekordów. Możesz pobrać plik, klikając poniższe łącze i zapisać go w lokalizacji DC.

people.csv

Teraz wykonajmy następujące kroki, aby narysować wykres kołowy w DC.

Krok 1: Dołącz skrypt

Dodajmy D3, DC i Crossfilter, używając następującego kodu -

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

Krok 2: Zdefiniuj zmienną

Utwórz obiekt typu, dc.pieChart jak pokazano poniżej -

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

Tutaj identyfikator Ciasta jest zamapowany na ciasto.

Krok 3: Przeczytaj dane

Odczytaj swoje dane (powiedzmy z people.csv) za pomocą rozszerzenia d3.csv()funkcjonować. Jest zdefiniowany w następujący sposób -

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

W tym przypadku, jeśli plik danych nie jest dostępny w określonej lokalizacji, funkcja d3.csv () zwraca błąd.

Krok 4: Zdefiniuj Crossfilter

Zdefiniuj zmienną dla Crossfilter i przypisz dane do Crossfilter. Jest zdefiniowany poniżej -

var mycrossfilter = crossfilter(people);

Krok 5: Utwórz wymiar

Utwórz wymiar dla płci za pomocą poniższej funkcji -

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

Tutaj płeć ludzi jest używana jako wymiar.

Krok 6: RedukcjaCount ()

Utwórz grupę Crossfilter, stosując funkcję group () i redukujCount () na powyższym utworzonym wymiarze płci - groupDimension.

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

Krok 7: Wygeneruj ciasto

Wygeneruj ciasto za pomocą poniższej funkcji -

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();

Tutaj,

Szerokość wykresu kołowego jest ustawiona na 800.
Wysokość wykresu kołowego jest ustawiona na 300.
Wymiar wykresu kołowego jest ustawiony na genderDimension przy użyciu metody Dimensions ().
Grupa wykresu kołowego jest ustawiona na genderGroup przy użyciu metody group ().
Dodano zdarzenie click do rejestrowania danych za pomocą wbudowanego zdarzenia DC.js, renderlet(). Renderlet jest wywoływany za każdym razem, gdy wykres jest renderowany lub rysowany.

Krok 8: Przykład roboczy

Utwórz nowy plik html, pie.html i dołącz wszystkie powyższe kroki, jak pokazano poniżej -

<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>

Teraz poproś przeglądarkę, a zobaczymy następującą odpowiedź.