Jak ustawić PointIntervals na miesiąc w HighChart

Question

Użyłem HighCharts do wykreślenia liczby użytkowników utworzonych co miesiąc. Udało mi się pokazać miesiąc w osi x i ustawić pointInterval jak poniżej

pointInterval: 24 * 3600 * 1000 * 31

Ale dano ślepo i nie będzie wykreślić punkty prawidłowo. Muszę wykreślić punkty 1 każdego miesiąca. Ale powyższy przedział pomaga wiązać punkty miesięcznie, a nie pierwszego dnia miesiąca. Ten example opisuje mój problem. Etykietka daje jasny pomysł. Oto mój kod

series: [{ 
     type: 'area', 
     name: 'CDP Created', 
     pointInterval: 24 * 3600 * 1000 * 31, 
     pointStart: Date.UTC(2005, 0, 01),   
     dataGrouping: { 
      enabled: false 
     }, 
     data: [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4] 

    }] 

Czy mimo ustawić pointInterval zależy od miesiąca. Ponieważ jeślibym po prostu podał pointInterval jak wyżej, będzie obliczał co 31 dni. Powoduje to problem, gdy miesiąc ma 28 lub 30 dni. Jak to osiągnąć. Dopasowywanie szerokości elementu div kontenera powoduje, że wartości osi X są wyświetlane niepoprawnie. Z góry dzięki

Answer 1

Niestety nie jest to możliwe - pointInterval tylko przyrosty o podaną liczbę, więc nieregularne wartości nie są możliwe. Można jednak bezpośrednio ustawić wartość X, patrz: http://jsfiddle.net/kUBdb/2/

Dobrą rzeczą jest to, że JS

Date.UTC(2007, 10, 10) == Date.UTC(2005,34, 10) 

zwraca true, dzięki czemu można swobodnie zwiększać miesiąc o jeden.

Answer 2

Można dynamicznie wypełniać wartość xosi (według miesiąca) i przesyłać razem z danymi yxais. Kod byłby następujący:

var s = {name: 'serial name', data: []}, 
    serialData = [], categories = []; 
var flatData = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], 
    startDate = Date.UTC(2000, 1, 1); 
// Set the xaxis value as first day of month 
for (var i = 0; i < flatData.length; i++) { 
    var d = new Date(); 
    d.setTime(startDate); 
    d.setMonth(d.getMonth() + i); 
    categories.push(d.getTime()); 
} 
for (var i = 0; i < flatData.length; i++) { 
    s.data.push([categories[i], flatData[i]]); 
} 
serialData.push(s); 

$('#canvas').highcharts({ 
    ...... 
    xAxis: { 
     type: 'datetime', 
    } 
    serial: serialData 
}); 

Następnie etykiety xaxis będą oznaczone "według miesiąca". Oto przykład: JSFiddle.

Pomysł jest importowany stąd: HighCharts Demo.

Answer 3

Można ręcznie wygenerować date tagi i dodać je do listy danych, takich jak ten:

series: [{ 
     data: [["Jan 1, 2005", 0], ["Feb 1, 2005", 0], ..., ["Dec 1, 2005", 54.4]], 
     pointInterval: 24 * 3600 * 1000 * 31, 
     pointStart: Date.UTC(2005, 0, 01)   
    }] 

W ten sposób można korzystać z pointInterval jak jest (dla przybliżonej widokiem na oś x), a następnie za pomocą oznacz na mapie punkty (dla dokładnych danych).

Po powiększeniu wykresu zobaczysz niewielkie nakładanie się punktów i tyknięć osi X, ale jeśli nie potrzebujesz doskonałego wyrównania, powinno to wystarczyć.

Aby wygenerować date tagów (np "Jan 1, 2005"), chciałbym zrobić coś takiego:

var data = [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4]; 
var date = new Date("January 1, 2005"); 
var monthNameList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 

for (i = 0; x < data.length; i++) 
{ 
    var stringDate = monthNameList[date.getMonth()] + " 1, " + date.getFullYear(); 
    resultList.push(stringDate); 
    date.setMonth(date.getMonth() + 1); 
} 

Następnie dodać każdy element danych.

Edytowane: Myślę, że pierwsza odpowiedź powyżej jest bardzo fajny sposób generowania tagów daty. (Sprawdź JSFiddle)