que trata con gráficos de barras agudas con nombres de categoría muy largos

Question

Tengo un gráfico de barras construido con Highcharts que utiliza categorías para su eje x - categorías de palabras realmente largas. No puedo encontrar una buena manera de asegurarme de que las categorías permanezcan siempre en una línea. No puedo abreviarlos a menos que pueda usar una información sobre herramientas o algo para mostrar la versión larga al pasar el ratón sobre el mouse o sobre alguna otra interacción intuitiva del usuario. Cuando las categorías se ajustan en línea, comienza a verse como una pared de texto.

¿Alguna idea para mostrar categorías largas y datos de manera limpia? Estoy dispuesto a considerar un tipo de gráfico diferente siempre que muestre los datos de una manera clara y agradable. Me gustaría seguir con Highcharts, pero solo si es posible.

EDITAR: Después de mucho esfuerzo, he renunciado a la idea de añadir un texto de ayuda a una categoría de etiqueta del eje x en un cross-browser manera (IE6 +). Incluso con JQuery no parece posible o práctico. Todavía estoy buscando cualquier solución que me permita mostrar estas categorías largas muy bien (no estoy contento con el fiddle que creé anteriormente porque al pasar el ratón sobre la barra de datos no es lo suficientemente obvio para el usuario).

Una imagen de la gráfica problema, con categorías oscurecidas:

Código jsFiddle:

HTML:

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
<div id='mytoolTip'></div> 

Javascript:

$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'bar' 
      }, 
      title: { 
       text: 'Historic World Population by Region' 
      }, 
      subtitle: { 
       text: 'Source: Wikipedia.org' 
      }, 
      xAxis: { 
       categories: ['Africa blahblahblah blah blah blah ', 'America blahblahblah blah blah blah ', 'Asia blahblahblah blah blah blah', 'Europe blahblahblah blah blah blah ', 'Oceania blahblahblah blah blah blah '], 
        title: { 
         text: null 
        }, 
        labels: { 
         formatter: function() { 
          return(this.value.substring(0,10) + "..."); 
         } 
        }        
       }, 
       yAxis: { 
        min: 0, 
        title: { 
         text: 'Population (millions)', 
         align: 'high' 
        }, 
        labels: { 
         overflow: 'justify' 
        } 
       }, 
       tooltip: { 
        formatter: function() { 
         $("#mytoolTip").html(this.x + 'and the value is ' + this.y) ; 
         return false ; 
        } 
       }, 
       plotOptions: { 
        bar: { 
         dataLabels: { 
          enabled: true 
         } 
        } 
       }, 
       legend: { 
        layout: 'vertical', 
        align: 'right', 
        verticalAlign: 'top', 
        x: -100, 
        y: 100, 
        floating: true, 
        borderWidth: 1, 
        backgroundColor: '#FFFFFF', 
        shadow: true 
       }, 
       credits: { 
        enabled: false 
       }, 
       series: [{ 
        name: 'Year 1800', 
        data: [107, 31, 635, 203, 2] 
       }, { 
        name: 'Year 1900', 
        data: [133, 156, 947, 408, 6] 
       }, { 
        name: 'Year 2008', 
        data: [973, 914, 4054, 732, 34] 
       }] 
      }); 
     }); 
    }); 

Answer 1

Prueba este violín:http://jsfiddle.net/a6zsn/70/

Tuvimos un problema similar que con el tiempo hemos resuelto permitiendo que las etiquetas a usar HTML. Si bien no fuimos con la solución exacta publicada a continuación, esto debería funcionar para usted, ya que utiliza el widget de información sobre herramientas jQueryUI para mostrar el texto completo en el vuelo estacionario.

Observe cómo estoy definiendo el objeto xAxis.labels.

$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'bar', 
       events: { 
        load: function (event) { 
         $('.js-ellipse').tooltip(); 
        } 
       } 
      }, 
      title: { 
       text: 'Historic World Population by Region' 
      }, 
      subtitle: { 
       text: 'Source: Wikipedia.org' 
      }, 
      xAxis: { 
       categories: ['Africa is the best place to do safari. Label is soooo big that it iss ugly now. =(. -38023-8412-4812-4812-403-8523-52309583409853409530495340985 ', 'America is the best place you can ever live in ', 'Asia is the best food ever ', 'Europe best chicks ever on earth ', 'Oceania i dont know any thing about this place '], 
       title: { 
        text: null 
       }, 
       labels: { 
        formatter: function() { 
         var text = this.value, 
          formatted = text.length > 25 ? text.substring(0, 25) + '...' : text; 

         return '<div class="js-ellipse" style="width:150px; overflow:hidden" title="' + text + '">' + formatted + '</div>'; 
        }, 
        style: { 
         width: '150px' 
        }, 
        useHTML: true 
      } 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Population (millions)', 
        align: 'high' 
       }, 
       labels: { 
        overflow: 'justify' 
       } 
      }, 
      tooltip: { 
       formatter: function() { 
        $("#mytoolTip").html(this.x + 'and the value is ' + this.y) ; 
        return false ; 
       } 
      }, 
      plotOptions: { 
       bar: { 
        dataLabels: { 
         enabled: true 
        } 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -100, 
       y: 100, 
       floating: true, 
       borderWidth: 1, 
       backgroundColor: '#FFFFFF', 
       shadow: true 
      }, 
      credits: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'Year 1800', 
       data: [107, 31, 635, 203, 2] 
      }, { 
       name: 'Year 1900', 
       data: [133, 156, 947, 408, 6] 
      }, { 
       name: 'Year 2008', 
       data: [973, 914, 4054, 732, 34] 
      }] 
     }); 
    }); 

}); 

Answer 2

trabajojsFiddle

mover la punta de la herramienta:

HTML

<div id='mytoolTip'></div>​ 

JavaScript

tooltip: { 
      formatter: function() { 

       $("#mytoolTip").html(this.x + 'and the value is ' + this.y) ; 
       return false ; 
      } 
     }, 

esto es cómo se puede obtener el nombre de la categoría de la ventana de información se cierne

 this.key 

jsFiddle

Answer 3

Recorte las etiquetas

xAxis: { 
      categories: ['Foo afkhbakfbakjfbakfbnbafnbaf', 'Bar', 'Foobar'], 
      labels: { 
       formatter: function() { 
        return this.value.substring(0, 8); 
       } 
      } 
     },