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