2012-05-26 13 views
12

W mojej witrynie wdrażam Highchery, jednak z punktu widzenia prezentacji jest to trudne.Highcharts usuwają etykiety z wartością zerową

Moje dane ładują się poprawnie, ale w przypadku serii niektóre wartości są zerowe. Chciałbym wyświetlić etykietę, gdy nie jest zero, w przeciwnym razie trudno będzie ją odczytać.

Próbuję zrobić coś takiego:

plotOptions: { 
    column: { 
    stacking: 'normal', 
    dataLabels: { 
      enabled: this.value == 0 ? false : true, 
     color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' } 
} 
} 

Ale to nie działa. Próbowałem używać tylko "to" zamiast wartości, ale także nie go odebrać. Nie mogłem znaleźć domyślnej opcji z biblioteki, która pozwoliłaby mi to zrobić bez konieczności tworzenia niestandardowego kodu.

Sprawdziłem kilka podejść, ale zera są w jednej z serii. Nadal chcę przedstawić etykietę dla wartości, które nie są zerami dla grupy.

Myślę, że gdy jeden mówi this.y przybiera wartość całej grupy, a nie poszczególne serie ...

Wszelkie sugestie? Najwyraźniej robię coś nie tak!

Odpowiedz

52

Czy próbowałeś użyć opcji formatter dla dataLabels? Powinieneś mieć dostęp do swoich danych w tym zakresie i zdecydować, jak powinna wyglądać etykieta. Tutaj możesz sprawdzić zero i po prostu wrócić null pokazany poniżej.

dataLabels: { 
    enabled: true, 
    color: colors[0], 
    style: { 
     fontWeight: 'bold' 
    }, 
    formatter: function() { 
     if (this.y != 0) { 
      return this.y +'%'; 
     } else { 
      return null; 
     } 
    } 
} 

Dodatkowo, jeśli masz problemy dowiedzieć się, jaka część danych patrzeć, używać console.log(this) w funkcji formatowania, dzięki czemu można zobaczyć obiekt, który pracuje z.

Sprawdź ten pracuje jsfiddle przykład: http://jsfiddle.net/VLmKK/69/

nadzieję, że pomoże!

Aktualizacja: Zwraca wartość null zamiast pustego ciągu znaków, aby uniknąć utworzenia niewidocznej etykiety, jak wspomniano w komentarzach Bretta. Dzięki.

Możesz również not return anything na wartości zero.

+0

dzięki Gizmotywacji, zredagowałem pytanie, aby wyjaśnić. – Lievcin

+0

@Lievcin: Opcja formatowania obsługuje każdą wartość indywidualnie tak, jak chcesz. Przetestowałem to w przykładowych plikach highchart. Usunięto tylko etykiety z punktów danych o wartości 0. Czy można go wypróbować? – christurnerio

+0

Właśnie dodałem przykład jsfiddle. http://jsfiddle.net/gizmovation/VLmKK/ – christurnerio

Powiązane problemy