DC.js - Gráfico de series
Una serie es un conjunto de datos. Puede trazar un gráfico basado en los datos. Este capítulo explica cómo dibujar un gráfico en serie en detalle.
Métodos de gráficos de series
Antes de pasar a dibujar un gráfico en serie, debemos comprender el dc.seriesChartclase y sus métodos. Dc.seriesChart usa Mixins para obtener la funcionalidad básica de dibujar un gráfico. El mixin utilizado por dc.seriesChart es:
- dc.stackMixin
El diagrama de clases completo de dc.seriesChart es el siguiente:
El dc.seriesChart obtiene todos los métodos de los mixins especificados anteriormente. Tiene sus propios métodos para dibujar el gráfico de series, que se explican a continuación:
gráfico ([función])
Este método se utiliza para obtener o configurar la función de gráfico.
seriesAccessor ([accesor])
Se utiliza para obtener o configurar la función de acceso para la serie mostrada.
seriesSort ([sortFunction])
Este método se utiliza para obtener o establecer una función para ordenar la lista de series dando valores de serie.
valueSort ([sortFunction])
Este método se utiliza para obtener o establecer una función para ordenar los valores de cada serie.
Dibujar un gráfico de series
Dibujemos un gráfico de series en DC. En este ejemplo, tomemos un conjunto de datos llamado people_hw.csv. El archivo de datos de muestra es el siguiente:
id,name,gender,height,weight
1,Kinsley,Male,168,90
2,Dimitry,Male,177,61
3,Martica,Female,152,76
4,Brittni,Female,156,88
5,Phillip,Male,161,78
6,Sofie,Female,161,71
7,Avril,Female,163,55
8,Allistir,Male,161,75
9,Emelda,Female,154,66
10,Camella,Female,153,52
...............
...............El archivo de muestra anterior contiene muchos registros. Puede descargar el archivo haciendo clic en el siguiente enlace y guardarlo en su ubicación de DC.
people_hw.csv
Ahora, sigamos los siguientes pasos para dibujar un gráfico de series en DC.
Paso 1: definir una variable
Definamos la variable como se muestra a continuación:
var chart = dc.seriesChart('#line');Aquí, la función seriesChart se asigna con la línea de identificación.
Paso 2: lee los datos
Leer datos del archivo people_hw.csv -
d3.csv("data/people_hw.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
}Si no hay datos, devuelve un error. Ahora, asigne los datos a un filtro cruzado. Una vez que obtenemos los datos, podemos recuperarlos uno por uno y verificar el género usando la codificación que se proporciona a continuación:
people.forEach(function(x) {
if(x.gender == 'Male') {
x.newdata = 1;
} else {
x.newdata = 2;
}
});Paso 3: crea una dimensión de edad
Ahora, cree una dimensión para la edad como se muestra a continuación:
var hwDimension = mycrossfilter.dimension(function(data) {
return [data.gender, data.height];
});Aquí, hemos asignado la dimensión y devuelve el género y la altura. Ahora, agrúpelo usando elreduceCount() función, que se define a continuación:
var hwGroup = hwDimension.group().reduceCount();Paso 4: generar un gráfico
Ahora, genere un gráfico de series utilizando la codificación que se proporciona a continuación:
chart
.width(800)
.height(600)
.chart(function(c) {
return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
})
.x(d3.scale.linear().domain([145,180]))
.elasticY(true)
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Count")
.dimension(hwDimension)
.group(hwGroup)
.seriesAccessor(function(d) { return d.key[0];})
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.value; })
legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1).legendWidth(120)\
.itemWidth(60));
chart.render();Aquí,
- El ancho del gráfico es 800 y la altura es 600.
- Usando el método d3.scale.linear (), especificamos el valor del dominio.
- Usando la función seriesAccessor, muestra la serie para el datum.
- El descriptor de acceso de clave y valor devuelve la clave y el valor de la serie.
- La leyenda se puede utilizar para agregar altura y ancho.
Paso 5: ejemplo de trabajo
La lista de códigos completa es la siguiente. Crea una pagina webline_series.html y agregue los siguientes cambios en él.
<html>
<head>
<title>Series 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 = "line"></div>
</div>
<script language = "javascript">
var chart = dc.seriesChart('#line');
d3.csv("data/people_hw.csv", function(errors, people) {
var mycrossfilter = crossfilter(people);
people.forEach(function(x) {
if(x.gender == 'Male') {
x.newdata = 1;
} else {
x.newdata = 2;
}
});
var hwDimension = mycrossfilter.dimension(function(data) {
return [data.gender, data.height];
});
var hwGroup = hwDimension.group().reduceCount();
chart
.width(800)
.height(600)
.chart(function(c) {
return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
})
.x(d3.scale.linear().domain([145,180]))
.elasticY(true)
.brushOn(false)
.xAxisLabel("Height")
.yAxisLabel("Count")
.dimension(hwDimension)
.group(hwGroup)
.seriesAccessor(function(d) { return d.key[0];})
.keyAccessor(function(d) { return +d.key[1]; })
.valueAccessor(function(d) { return +d.value; })
.legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1)
.legendWidth(120).itemWidth(60));
chart.render();
});
</script>
</body>
</html>Ahora, solicita el navegador y veremos la siguiente respuesta.
