Question

我有一个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月，

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

Answer 1

您不必格式化数据库中的日期，但您可以在发送到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/

Answer 2

通常您不需要在数据本身内格式化日期。 Highcharts具有格式化日期的特定配置，称为dateFormat。他们将它们用于标签和工具提示。然后，如果您在创建图表后执行自定义操作，则可能需要自己执行此操作，但通常不会按照您的方式执行此操作。有关示例，请参阅这些Highcharts API链接：

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

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

2 个答案: