do czynienia z wykresu słupkowego w zestawie high chart z naprawdę długimi nazwami kategorii

Question

Mam wykres słupkowy zbudowany z Highcharts, który wykorzystuje kategorie dla osi X - naprawdę długie kategorie uciążliwe. Nie mogę wymyślić dobry sposób, aby upewnić się, że kategorie zawsze pozostają na jednej linii. Nie mogę skracać ich pod warunkiem, że nie mogę użyć etykiety narzędziowej lub czegoś, aby pokazać długą wersję po najechaniu myszą lub innej intuicyjnej interakcji użytkownika. Po zawinięciu linii kategorii zaczyna wyglądać jak ściana tekstu.

Wszelkie pomysły na wyświetlanie długich kategorii i danych w czysty sposób? Jestem gotów rozważyć inny rodzaj wykresu, o ile wyświetla dane w jasny i ładny sposób. Chciałbym trzymać się Highcharts, ale tylko jeśli to możliwe.

EDIT: Po wielu staraniach, dałem się na idei dodanie podpowiedzi do kategorii etykiety osi x w przekroju przeglądarki (IE6 +) sposób. Nawet w przypadku JQuery nie wydaje się to możliwe ani praktyczne. Nadal szukam jakiegoś rozwiązania, które pozwala mi ładnie wyświetlać te długie kategorie (nie jestem zadowolony z wcześniej utworzonego, ponieważ unoszące się nad paskiem danych nie jest wystarczająco oczywiste dla użytkownika).

Obraz wykresu problemów, z kategorie zaciemnione:

kod 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

Spróbuj skrzypce:http://jsfiddle.net/a6zsn/70/

Mieliśmy podobny problem, który w końcu rozwiązany poprzez umożliwienie etykiety używać HTML. Chociaż nie podaliśmy dokładnego rozwiązania zamieszczonego poniżej, powinno to zadziałać, ponieważ używa widgetu podpowiedzi narzędzia jQueryUI, aby wyświetlić pełny tekst po najechaniu myszą.

Zobacz, jak definiuję obiekt 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

pracyjsFiddle

przesuwając podpowiedź:

HTML

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

JavaScript

tooltip: { 
      formatter: function() { 

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

to w jaki sposób można uzyskać nazwę kategorii z narzędzia końcówką unoszącego

 this.key 

jsFiddle

Answer 3

Przycinanie etykiety

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