2013-10-16 12 views
5

Mam problem z etykietami danych nakładającymi się na kolumny na moim wykresie.Arkusze danych Highcharts z nakładającymi się kolumnami

$('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 

     xAxis: { 
      type: 'datetime' 
     }, 
     series: [{ 
      data: [[Date.UTC(2013, 3, 1, 0, 0, 0), 169], 
        [Date.UTC(2013, 4, 1, 0, 0, 0), 176], 
        [Date.UTC(2013, 5, 1, 0, 0, 0), 470], 
        [Date.UTC(2013, 6, 1, 0, 0, 0), 346], 
        [Date.UTC(2013, 7, 1, 0, 0, 0), 252], 
        [Date.UTC(2013, 8, 1, 0, 0, 0), 138]], 
      dataLabels: { 
       enabled: true 
      } 
     }] 
    }); 
}); 

Można zobaczyć exmaple tutaj: http://jsfiddle.net/J6WvR/1/

Mój wykres powinien mieć stałą wysokość, a ja nie rozumiem, dlaczego największa wysokość kolumny nie może być obliczona, aby dopasować jego etykietę danych. Jak mogę to naprawić?

+0

Czy konieczna jest stała wysokość? bcoz, jeśli usuniesz wysokość z pojemnika, to powinno działać. – nik

Odpowiedz

13

Według oficjalnej dokumentacji API: overflow property

Aby wyświetlić etykiety danych poza obszar działki, zestaw do uprawy fałszywego i przelewem do „żaden”.

  dataLabels: { 
       enabled: true, 
       crop: false, 
       overflow: 'none' 
      } 
+0

Dobre miejsce w tamtejszej dokumentacji. – SteveP

+0

Pracował jak urok !!! –

0

Jedną opcją jest przesunięcie pozycji etykiet. na przykład to przeniesie je w barach:

plotOptions: { 
     column: { 
      dataLabels: { 
       y: 20, 
       color:'white' 
      } 
     } 
    }, 

http://jsfiddle.net/TBfLS/

Alternatywą jest ręcznie ustawić maksymalną wartość Y, aby zrobić miejsce na etykiecie:

yAxis: { 
     max: 600, 
     endOnTick: false 
    }, 

http://jsfiddle.net/2AhVT/

Mam nadzieję, że jedna z tych opcji pomoże.

Trzecia (i prawdopodobnie lepsza) opcja została wysłana przez Ivana Chau.

0

można spróbować max dla yAxis,

obliczyć maksymalną wartość od ciebie dane i dodać kilka poduszki powiedzieć 100 do niego i ustawić go jako max dla yAxis

yAxis:{ 
       max: 600, 
      }, 

aktualizowania skrzypce z max dla yAxis na http://jsfiddle.net/J6WvR/3/

nadziei będzie to obsługi dla ciebie

Powiązane problemy