Question

我有一个以这种格式返回数据的Api调用...

"values" : [ {
    "key_as_string" : "2011-10-01T00:00:00.000Z",
    "key" : 1317427200000,
    "doc_count" : 3
}, {
    "key_as_string" : "2011-11-01T00:00:00.000Z",
    "key" : 1320105600000,
    "doc_count" : 10
}, {
    "key_as_string" : "2011-12-01T00:00:00.000Z",
    "key" : 1322697600000,
    "doc_count" : 3
}, {
    "key_as_string" : "2012-01-01T00:00:00.000Z",
    "key" : 1325376000000,
    "doc_count" : 3
}, {
    "key_as_string" : "2012-02-01T00:00:00.000Z",
    "key" : 1328054400000,
    "doc_count" : 9
}, ... ]

我希望用高图来绘制它，使它看起来像this demo。

我将数据映射到highcharts期望的格式......

var graphData = $.map(rawData, function (item, i) {
    return  [[new Date(item.key),
             item.doc_count]]; //Note nested array as map will flatten 1 layer
});

通过检查调试器中的graphData，日期存在且正确。

最后，我按照以下方式设置图表：

$(Selector).highcharts({
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Total Emails'
    },
    xAxis: {
        title: {
            text: 'Date'
        },
        type: 'datetime',
        dateTimeLabelFormats: {
            month: '%b %y',
            year: '%y'
        }
    },
    yAxis: {
        title: {
            text: 'Count'
        },
        min: 0
    },
    series: [{
        name: 'Emails',
        data: graphData
    }]
});

不幸的是，无论我做什么，我都无法获得高图来显示合理的x轴标签。目前它看起来像这样：

enter image description here

如何在x轴上显示短日期格式？由于数据是按月计算的，因此我更喜欢格式Jan 2011。

顺便说一句，我不知道为什么我没有得到最合适的线条，所以如果它很简单，请告诉我。

Answer 1

您只需按原样传递item.key，而无需通过javascript Date

运行它

var graphData = $.map(someApiData.values, function (item, i) {
    return [[item.key,
    item.doc_count]]; //Note nested array as map will flatten 1 layer
});

演示：http://jsfiddle.net/robschmuecker/Gk5m8/

x轴上的样条图日期

1 个答案: