Estoy utilizando Highcharts y tengo un gráfico con un eje de fecha y hora. La mayoría de las veces las etiquetas se distribuyen correctamente a lo largo del eje sin superposición.Highcharts: con superposición de etiquetas de eje de fecha y hora
Pero a veces sucede que las etiquetas se superponen. Aquí puede ver un ejemplo: http://jsfiddle.net/4ghhf/ El uso de tickInterval y tickPixelInterval no resuelve el problema.
¿Qué debo hacer para evitar el problema?
Veo dos maneras de fijar su problema:
He aplicado tanto en el siguiente código (sección ejeX):
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
type: 'datetime',
tickInterval : 7*24 * 3600 * 1000,
labels : { y : 20, rotation: -45, align: 'right' }
},
series: [{
data: [
[Date.UTC(2010, 3, 11), 29.9],
[Date.UTC(2010, 4, 8), 71.5]
]
}]
});
Quizás staggerLines es una solución para usted:
xAxis: {
type: 'datetime',
labels: {
staggerLines: 2
}
},
He actualizado su jsFiddle con esta configuración: http://jsfiddle.net/benebun/4ghhf/134/
Desde el API Ref:
staggerLines: Número (2.1) Dado que sólo
ejes horizontales. La cantidad de líneas para extender las etiquetas para crear etiquetas más ajustadas o más espaciosas. .
(encontrado a través de this comment en github)
I actualizan su jsFiddle con este ajuste: http://jsfiddle.net/benebun/4ghhf/134/
Otra solución es utilizar tickPixelInterval, que define la separación de píxeles entre las garrapatas. Un número más alto dará como resultado un menor número de tics.
http://api.highcharts.com/highcharts#xAxis.tickPixelInterval
encontrado mi respuesta aquí: Highcharts overlapping category labels que estaba usando una matriz categoría para las etiquetas de eje x en lugar de dejar Highcharts analizar un código de fecha UTC.
También puede depender de la fuente que está utilizando. Conmigo, esto le sucede a Arial, pero funciona bien con Helvetica o Times New Roman.
Tenía el mismo problema y se corrigió con el autoRotation configuration. Highcharts rotará automáticamente sus etiquetas si no encajan. Si hay demasiados, incluso cuando se roten, Highcharts intentará eliminar etiquetas automáticamente.
xAxis = {
"type": 'datetime',
"tickInterval": 30 * 24 * 3600 * 1000,
"labels": {
autoRotation: [45]
}
}
Sólo asegúrese de que no se especifica paso ya que anulará auto rotación.
Lo siento pero no puedo usar esas soluciones. – sabrina
Los datos de gráfico se cargan dinámicamente; si se establece tickInterval, las etiquetas se superpondrán en los gráficos con periodos de tiempo prolongados. Tampoco es una solución establecer tickInterval dinámicamente, dependiendo del intervalo de tiempo, ya que el gráfico es ampliable y zoom. Tampoco puedo rotar las etiquetas, ya que tengo que copiar el diseño de nuestro diseñador (el archivo jsfiddle que he vinculado era solo un ejemplo simple para entender el problema). He intentado usar tickPixelInterval, pero cuando el período de tiempo es corto, como en el ejemplo, los píxeles no se respetan y las etiquetas se superponen. ¿Por qué sucede esto? ¿Realmente no hay solución? – sabrina