用正确的月份格式化Highcharts日期

Fomatting the Highcharts date with correct month

本文关键字：格式化 Highcharts 日期      更新时间：2023-09-26

我有一个Json数据，我正在从数据库中检索填充highcharts系列从DB中检索到的序列数据如下所示:

'series_data' => string '[ {name:'Hyderabad',data:[ [Date.UTC(2013, 05, 01),311328],[Date.UTC(2013, 05, 02),363780], [Date.UTC(2013, 04, 03),364062],[Date.UTC(2013, 04, 04),283128], [Date.UTC(2013, 04, 05),322608]] }, {name:'Vijayawada',data:[ [Date.UTC(2013, 06, 01),363216],[Date.UTC(2013, 06, 02),404670], [Date.UTC(2013, 06, 03),370783],[Date.UTC(2013, 06, 04),459942], [Date.UTC(2013, 07, 05),569499]] }]'

有一个问题，javascript日期，而在图表中显示，它显示一个月前。我知道javascipt Date将接受月份值0 - 11…0是1月，11是12月，

所以，我的问题是，在高图中显示如何格式化日期以显示正确的月份。我无法在数据库侧格式化日期。

你不必在数据库中格式化日期，但你可以在发送到Highcharts之前格式化。

简单代替:

Date.UTC(2013, 05, 01)

使用:

Date.UTC(2013, 04, 01)

或者更好:

Date.UTC(2013, 4, 1)

JS中的解决方案:

function subtractMonth(a) {
    var date = new Date(a[0]),
        month = date.getMonth();
    date.setMonth(month - 1);
    return [date.getTime(), a[1]];
}
function sorter(a, b) {
        return a[0] - b[0];
}
var data = [{
    name: 'Hyderabad',
    data: [
        [Date.UTC(2013, 05, 01), 311328],
        [Date.UTC(2013, 05, 02), 363780],
        [Date.UTC(2013, 04, 03), 364062],
        [Date.UTC(2013, 04, 04), 283128],
        [Date.UTC(2013, 04, 05), 322608]
    ]
}, {
    name: 'Vijayawada',
    data: [
        [Date.UTC(2013, 06, 01), 363216],
        [Date.UTC(2013, 06, 02), 404670],
        [Date.UTC(2013, 06, 03), 370783],
        [Date.UTC(2013, 06, 04), 459942],
        [Date.UTC(2013, 07, 05), 569499]
    ]
}];
$.each(data, function (i, s) {
    s.data = s.data.map(subtractMonth);
    s.data.sort(sorter);
})

$('#container').highcharts({
    chart: {
        type: 'column'
    },
    xAxis: {
        type: 'datetime'    
    },
    series: data
});

jsFiddle: http://jsfiddle.net/n9nR2/

通常不需要在数据本身中格式化日期。Highcharts具有格式化日期的特定配置，称为dateFormat。它们有标签和工具提示。然后，如果你在创建图表后做一些自定义的事情，你可能需要自己做，但通常不是你做的方式。有关示例，请参阅Highcharts API链接:

http://api.highcharts.com/highcharts plotOptions.area.tooltip.dateTimeLabelFormatshttp://api.highcharts.com/highcharts Highcharts.dateFormat

相关文章：