Gráfico de línea de tiempo simple desplazable con D3. js-D3-Timeline
| Autor: | commodityvectors |
|---|---|
| Views Total: | 8,436 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 13, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
D3-Timeline es una biblioteca de JavaScript pura para representar un gráfico de escala de tiempo desplazable y escalable mediante la biblioteca D3. js.
Funcionamiento
Incluya la hoja de estilo requerida en su página web.
<link rel="stylesheet" href="dist/timeline-chart.css">
Incluya las bibliotecas de JavaScript necesarias en la parte inferior de la Página Web.
<script src="/path/to/d3.min.js"></script> <script src="/path/to/d3-tip.min.js"></script> <script src="dist/timeline-chart.js"></script>
Prepare los datos del gráfico de la siguiente manera:
const data = [{
label: 'Name',
data: [{
type: TimelineChart.TYPE.POINT,
at: new Date([2015, 1, 1])
}, {
type: TimelineChart.TYPE.POINT,
at: new Date([2015, 2, 1])
}, {
type: TimelineChart.TYPE.POINT,
at: new Date([2015, 3, 1])
}, {
type: TimelineChart.TYPE.POINT,
at: new Date([2015, 4, 1])
}, {
type: TimelineChart.TYPE.POINT,
at: new Date([2015, 5, 1])
}, {
type: TimelineChart.TYPE.POINT,
at: new Date([2015, 6, 1])
}]
}, {
label: 'Type',
data: [{
type: TimelineChart.TYPE.POINT,
at: new Date([2015, 1, 11])
}, {
type: TimelineChart.TYPE.POINT,
at: new Date([2015, 1, 15])
}, {
type: TimelineChart.TYPE.POINT,
at: new Date([2015, 3, 10])
}, {
label: 'I\'m a label',
type: TimelineChart.TYPE.INTERVAL,
from: new Date([2015, 2, 1]),
to: new Date([2015, 3, 1])
}, {
type: TimelineChart.TYPE.POINT,
at: new Date([2015, 6, 1])
}, {
type: TimelineChart.TYPE.POINT,
at: new Date([2015, 7, 1])
}]
}, {
label: 'Imp',
data: [{
label: 'Label 1',
type: TimelineChart.TYPE.INTERVAL,
from: new Date([2015, 1, 15]),
to: new Date([2015, 3, 1])
}, {
label: 'Label 2',
type: TimelineChart.TYPE.INTERVAL,
from: new Date([2015, 4, 1]),
to: new Date([2015, 5, 12])
}]
}]; Cree un contenedor para el gráfico de escala de tiempo.
<div id="chart"></div>
Represente un gráfico de escala de tiempo dentro del contenedor que acaba de crear.
const element = document.getElementById('chart');
const timeline = new TimelineChart(element, data, {
tip: function(d) {
return d.at || `${d.from}<br>${d.to}`;
}
}).onVizChange(e => console.log(e)); Todas las opciones de configuración predeterminadas.
const timeline = new TimelineChart(element, data, {
intervalMinWidth: 8, // minimum width for an interval element
tip: undefined,
textTruncateThreshold: 30,
enableLiveTimer: false,
timerTickInterval: 1000,
hideGroupLabels: false
}) Registro de cambios
v1.3.0 (08/13/2018)
- Agregar hideGroupLabels opción
