2017-10-10 28 views
0

自從我與Highcharts合作以來已經有一段時間了。看了一下週圍,但如果Highcharts能夠讀取這種格式作爲日期時間輸入,找不到任何信息。如何使用Highcharts的十進制日期(例如1992.9614)?

的CSV看起來是這樣的:

2016.3610,,,53.83000,53.39000 
2016.3881,,,52.60000,53.29000 
2016.4153,,,54.28000,54.71000 

任何機會,我可以用這樣的日期,或者我需要轉換的是第一?

感謝您的任何提示!

回答

1

您可以使用xAxis.labels.formatter來完成此操作。你需要想出一個解決方案來將你的小數分解成更多可讀的時間。爲此,我使用了這個answer的代碼。 示例代碼集:

function leapYear(year) { 
    return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0); 
} 

function getMonthAndDayFromDayOfYear(dayOfYear, year) { 
    var daysInMonthArray = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 
    if (leapYear(year)) { 
    daysInMonthArray[2] = 29; 
    } 

    var daysLeft = dayOfYear; 
    var month = 0; 
    for (i = 0; i < daysInMonthArray.length; i++) { 
    var daysInThisMonth = daysInMonthArray[i]; 
    if (daysLeft > daysInThisMonth) { 
     month += 1; 
     daysLeft -= daysInThisMonth; 
    } else { 
     break; 
    } 
    } 
    return { 
    month: month, 
    day: daysLeft 
    }; 
} 

function convertDecimalDate(decimalDate) { 
    decimalDate = parseFloat(decimalDate); 
    var year = parseInt(decimalDate); // Get just the integer part for the year 
    var daysPerYear = leapYear(year) ? 366 : 365; // Set days per year based on leap year or not 
    var decimalYear = decimalDate - year; // A decimal representing portion of the year left 
    var dayOfYear = Math.ceil(decimalYear * daysPerYear); // day of Year: 1 to 355 (or 366) 
    var md = getMonthAndDayFromDayOfYear(dayOfYear, year); 
    var day = md['day']; 
    var month = md['month']; 
    return new Date(year, month, day); 
} 


Highcharts.chart('container', { 
    chart: { 
    type: 'column' 
    }, 
    xAxis: { 
    labels: { 
     rotation: 45, 
     formatter: function() { 
     return convertDecimalDate(this.value); 
     } 
    } 
    }, 
    tooltip: { 
    formatter: function() { 
     return '<b>' + this.series.name + '</b><br/>' + 
     this.x + ': ' + this.y; 
    } 
    }, 
    series: [{ 
    data: [ 
     [2016.3610, 53.39000], 
     [2016.3881, 53.29000], 
     [2016.4153, 54.71000] 
    ] 
    }] 
}); 

直播demo

您也可以對工具提示格式化程序使用相同的方法。請注意,我沒有選擇特定的數據時間格式,因爲您沒有指定您需要的內容(月/年或日/月等)。

+0

非常酷!並感謝分享鏈接到原始問題/答案。 – luftikus143

0

Highcharts讀取時間毫秒,這是陳述時間的唯一可接受的方式。

查看公共簡介API on series.data.x

所以要從你的時間戳,你需要轉換它。

這就是說,如果你不關心日期,你可以使用你的點作爲輸入。 Highcharts不會將此視爲日期或時間,但假設您希望向他們展示這些內容,那麼這可能會起作用。

相關問題