Las etiquetas X-Axis superpuestas se superponen al gráfico en sí

Question

Tengo problemas con las etiquetas giradas del eje x. Si tienen más de 5-6 caracteres, se superponen al gráfico como puede ver aquí: http://jsfiddle.net/kmfT9/215/ Si esto no aparece, puede reproducir el error pegando debajo del código en una ventana de jsfiddle.

var chart = new Highcharts.Chart({ 

chart: { 
renderTo: 'container', 
marginLeft: 120 
}, 

xAxis: { 
categories: ['Jan', '02/03/2011', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels : { y : 20, rotation: -45 } 
}, 

yAxis: { 
lineWidth: 1, 
offset: 0, 
labels : { x: -20 }, 
title: { 
text: 'Primary Axis' 
}, 
tickWidth: 1 
}, 

series: [{ 
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
}] 

}); 

Aunque se establece un valor y en la propiedad de las etiquetas, esto solo se respeta para las etiquetas más pequeñas.

¿Alguien sabe la solución o lo que estoy haciendo mal?

Answer 1

Puede intentar agregar align: 'right' al objeto de etiquetas del eje x.

p. Ej.

 
xAxis: { categories: ['Jan', '02/03/2011', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels : { y : 20, rotation: -45, align: 'right' } }, 

Answer 2

A veces hay que hacer que los clientes quiere, y sé que el camino a continuación no es la mejor manera, pero puede ser que ayude a alguien). Entonces, como sé, HighCharts usa dos formas para visualizar gráficos. Es SVG (por ejemplo, compatible con Chrome, IE> 8 navegadores) y VML (compatible con IE < = 8). De esta manera, cada camino contiene puntos donde se puede resolver este problema que necesita con rotura suave.

Para resolverlo en SVG usted tiene que encontrar la función buildText y modificar en este punto:

// check width and apply soft breaks 
if (width) { 
... 
} 

por ejemplo, para agregar nuevo símbolo separado:

... 
var words = span.replace(/\\/g, '\\ ').replace(/-/g, '- ').split(' '), 
... 
tspan.appendChild(doc.createTextNode(words.join(' ').replace(/\\ /g, '\\').replace(/- /g, '-'))); 
... 

Si desea hacer que funcione posibilidad en VML. Puede escribir su propia función que hacen el mismo que el código de la función buildText:

function softBreaks() 
     { 
      //if ie and vml 
      hasSVG = !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect; 
      if(!hasSVG) 
      { 
       //for each 
       $.each($('.highcharts-axis > span > div'), function(index, value) { 

        var width = value.parentNode.style.posWidth; 
        var div = value; 
        if (width) { 
         var words = value.innerText.replace(/\//g, '/ ').replace(/\\/g, '\\ ').replace(/\./g, '. ').replace(/-/g, '- ').split(' '), 
         tooLong, 
         actualWidth, 
         rest = []; 

         while (words.length || rest.length) { 

          //actualWidth = value.parentNode.offsetWidth; 
          actualWidth = value.parentNode.scrollWidth; 
          tooLong = actualWidth > width; 

          if (!tooLong || words.length === 1) { // new line needed 
           words = rest; 
           rest = []; 
           if (words.length) { 
            div = document.createElement("div"); 
            value.parentNode.appendChild(div); 
            if (actualWidth > width) { // a single word is pressing it out 
             width = actualWidth; 
            } 
           } 
          } else { 
           div.removeChild(div.firstChild); 
           rest.unshift(words.pop()); 
          } 
          if (words.length) { 
           div.appendChild(document.createTextNode(words.join(' ').replace(/\/ /g, '/').replace(/\\ /g, '\\').replace(/\. /g, '.').replace(/- /g, '-'))); 
          } 
         } 
        } 
       }); 
      } 
     } 

Y después de esto debe llamar a esta función cuando carta cargada www.highcharts.com/ref/#chart-events--load (lo siento im nuevo usuario). Si tiene varios cuadros en la página, puede pasarlos como ID del gráfico de parámetros a la función softBreaks().