Rysuję wykres liniowy z miesięcznymi punktami danych. Jednak chcę, aby w skali wyświetlały tylko ciągi roku. Jak dotąd, takie łatwe. Jednakże, o ile widzę, Highcharts zawsze narysuje etykiety xAxis w stosunku do kleszczy ... i muszę wyświetlać je w środku między kleszczami. Czy jest jakiś prosty sposób robienia tego, czego mi brakuje, proszę ...?Highcharts: xAxis roczne etykiety wyśrodkowane między tikami
Istnieje kilka opcji xAxis, które mogą pomóc w robieniu tego, co chcesz.
http://api.highcharts.com/highcharts#xAxis.labels
Spójrz na „align”, który określa, czy etykiety są po lewej lub prawej stronie kleszcza, a także „x”, która pozwala na określenie x-przesunięcie na etykiecie od kleszcz.
Czy próbowałeś użyć umieszczenia tick? http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement
"Tylko dla osie podzielone na kategorie", niestety ... – user1617662
Według mojego rozeznania, zachowanie chec to:
http://jsfiddle.net/msjaiswal/U45Sr/2/
Pozwól rozbić rozwiązanie:
1. Miesięczne dane punktów
Jeden punkt danych odpowiadający jednego miesiąca:
var data = [
[Date.UTC(2003,1),0.872],
[Date.UTC(2003,2),0.8714],
[Date.UTC(2003,3),0.8638],
[Date.UTC(2003,4),0.8567],
[Date.UTC(2003,5),0.8536],
[Date.UTC(2003,6),0.8564],
..
]
2. Skala do wyświetlania tylko rocznych znaczników
pomocą opcji wykres jak to:
xAxis: {
minRange : 30 * 24 * 3600 * 1000, //
minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year
},
Problem polega na tym, że etykieta roku znajduje się pod nazwą "styczeń", a to nie w środku roku. – mirelon
Można to zrobić w celu obejścia tego problemu poprzez ręczne regulowanie położenia etykiety za pośrednictwem zwrotnego (tzw zarówno obciążenia i od nowa). Proszę spojrzeć na skrzypce do mojego komentarza na ten post: Highcharts - how can I center labels on a datetime x-axis?
Nie ma prostego, gotowego rozwiązania. Musisz użyć zdarzeń i odpowiednio zmienić położenie etykiet. Oto rozwiązanie próbki, które działa również podczas zmiany rozmiaru okna przeglądarki (lub w inny sposób zmuszając wykres na przerysowanie), nawet gdy zmienia się liczyć kleszcz: http://jsfiddle.net/McNetic/eyyom2qg/3/
Działa poprzez dołączenie tej samej procedury obsługi zdarzeń zarówno load i redraw wydarzenia:
$('#container').highcharts({
chart: {
events: {
load: fixLabels,
redraw: fixLabels
}
},
[...]
sam obsługi wygląda następująco:
var fixLabels = function() {
var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
labels.css('margin-left',
(parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left')))/2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
Zasadniczo, to działa tak:
Już to robię. Dane są jednak dynamiczne, a wraz ze wzrostem szczelin między kleszczami, etykiety są coraz bardziej nieprawdopodobne, przyklejone do kleszczy ... Nie wiem, czy uda mi się zdobyć liczbę kleszczy, dzięki czemu mogę obliczyć odległość między nimi i ustawić przesunięcie x wyrównane do środka etykiety w locie ... – user1617662