DC.js - wykres złożony
Wykres złożony to specjalny typ wykresu udostępniany przez DC.js. Zapewnia opcję renderowania wielu wykresów w tej samej siatce współrzędnych. Wykres złożony zapewnia zaawansowane opcje wizualizacji wykresu przy minimalnej liczbie linii kodu.
Metody wykresów złożonych
Zanim przejdziemy do rysowania wykresu złożonego, musimy zrozumieć dc.compositeChartklasa i jej metody. Dc.compositeChart używa mikserów, aby uzyskać podstawową funkcjonalność rysowania wykresu. Składniki używane przez dc.compositeChart są następujące -
- dc.baseMixin
- dc.marginMixin
- dc.colorMixin
- dc.coordinateGridMixin
Pełny diagram klas dc.barChart wygląda następująco -
Dc.compositeChart pobiera wszystkie metody z wyżej określonych mixinów. Ma własną metodę rysowania wykresu złożonego, co wyjaśniono poniżej -
redaguj ([subChartArray])
Ustaw zbiór wykresów do renderowania na tym samym wykresie siatki współrzędnych.
chart.compose([
dc.lineChart(chart)
dc.barChart(chart)
]);dzieci()
Pobiera wszystkie wykresy złożone w tej samej siatce współrzędnych.
childOptions ([childOptions])
Pobiera lub ustawia opcje wykresu dla wszystkich wykresów podrzędnych utworzonych w tej samej siatce współrzędnych.
shareTitle ([shareTitle])
Pobiera lub ustawia wspólny tytuł wykresu. Jeśli jest ustawiona, zostanie udostępniona wszystkim wykresom podrzędnym utworzonym w tej samej siatce współrzędnych.
shareColors ([shareColors])
Podobna do funkcji shareTitle (), z tą różnicą, że zamiast tytułu udostępnia kolory.
rightY ([yScale])
Pobiera lub ustawia skalę y dla prawej osi wykresu złożonego.
rightYAxis ([rightYAxis])
Pobiera lub ustawia prawą oś Y wykresu złożonego.
rightYAxisLabel (rightYAxisLabel [??])
Pobiera lub ustawia prawą etykietę osi Y.
alignYAxes ([alignYAxes])
Pobiera lub ustawia wyrównanie między lewą i prawą osią y.
useRightAxisGridLines ([useRightAxisGridLines])
Pobiera lub ustawia, czy rysować linie siatki z prawej osi Y wykresu złożonego. Domyślnym zachowaniem jest rysowanie od lewej osi y.
Narysuj wykres złożony
Narysujmy wykres złożony za pomocą DC.js. Aby to zrobić, powinniśmy postępować zgodnie z instrukcjami podanymi poniżej -
Krok 1: Zdefiniuj zmienną
Zdefiniujmy zmienną wykresu, jak pokazano poniżej -
var chart = dc.compositeChart('#compoiste');W tym przypadku funkcja dc.compositeChart jest mapowana z kontenerem mającym composite jako jego identyfikator.
Krok 2: Przeczytaj dane
Odczytaj dane z pliku people.csv -
d3.csv("data/people.csv", function(errors, people) {
}Jeśli nie ma danych, zwraca błąd. Użyjemy tego samego pliku people.csv. 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
.............
.............
..............Krok 3: zmapuj dane
Teraz zmapuj dane, jak pokazano poniżej -
var ndx = crossfilter();
ndx.add(people.map(function(data) {
return {
age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
male: data.gender == 'Male' ? 1 : 0,
female: data.gender == 'Male' ? 0 : 1
};
}));Tutaj przypisaliśmy wiek z danych Crossfilter. ~~ jest podwójnym operatorem bitowym NIE. Jest używany jako szybszy zamiennik.
Teraz zastosuj wymiar wiek i pogrupuj dane dotyczące płci, używając kodowania podanego poniżej -
var dim = ndx.dimension(dc.pluck('age')),
grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));Krok 4: Wygeneruj wykres
Teraz wygeneruj wykres złożony, używając kodu podanego poniżej -
composite
.width(768)
.height(480)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.renderHorizontalGridLines(true)
.compose ([
dc.lineChart(composite)
.dimension(dim)
.colors('red')
.group(grp1, "Male")
.dashStyle([2,2]),
dc.lineChart(composite)
.dimension(dim)
.colors('blue')
.group(grp2, "Female")
.dashStyle([5,5])
])
.brushOn(false)
.render();Tutaj,
Szerokość wykresu to 768, a wysokość to 480.
Funkcja d3.scale.linear służy do konstruowania nowej skali liniowej z podanym zakresem dziedzinowym [15, 70].
Etykietę osi X przypisujemy jako wiek, a etykietę osi Y jako liczbę.
Następnie wyrenderuj poziome linie siatki jako prawdziwe.
Skomponuj wartość kolorów wykresu liniowego - czerwony dla płci męskiej i niebieski dla kobiet.
Na koniec ustawiamy wartość brushOn na false i renderujemy wykres.
Krok 5: Przykład roboczy
Pełny kod jest następujący. Utwórz stronę internetowącomposite.html i dodaj do niego następujące zmiany.
<html>
<head>
<title>DC composite chart Sample</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.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 = "composite"></div>
</div>
<script type = "text/javascript">
var composite = dc.compositeChart("#composite");
d3.csv("data/people.csv", function(errors, people) {
var ndx = crossfilter();
ndx.add(people.map(function(data) {
return {
age: ~~((Date.now() - new Date(data.DOB)) / (31557600000)),
male: data.gender == 'Male' ? 1 : 0,
female: data.gender == 'Male' ? 0 : 1
};
}));
var dim = ndx.dimension(dc.pluck('age')),
grp1 = dim.group().reduceSum(dc.pluck('male')),
grp2 = dim.group().reduceSum(dc.pluck('female'));
composite
.width(768)
.height(480)
.x(d3.scale.linear().domain([15,70]))
.yAxisLabel("Count")
.xAxisLabel("Age")
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.renderHorizontalGridLines(true)
.compose ([
dc.lineChart(composite)
.dimension(dim)
.colors('red')
.group(grp1, "Male")
.dashStyle([2,2]),
dc.lineChart(composite)
.dimension(dim)
.colors('blue')
.group(grp2, "Female")
.dashStyle([5,5])
])
.brushOn(false)
.render();
});
</script>
</body>
</html>Teraz poproś przeglądarkę, a zobaczymy następującą odpowiedź.