javascript - HighStock 图表中纪元日期时间未正确显示

Question

我正在创建一个 Highstock 图表来显示每天收到的电子邮件数量。我有一个每天更新的 JSON 文件，如下所示:

[{
"name": "Month",
"data": [1471993200000, 1472079600000, 1472166000000, 1472252400000, 1472338800000, 1472425200000, 1472511600000, 1472598000000, 1472684400000, 1472770800000, 1472857200000, 1472943600000, 1473030000000, 1473116400000, 1473202800000, 1473289200000, 1473375600000, 1473462000000, 1473548400000, 1473634800000, 1473721200000, 1473807600000, 1473894000000, 1473980400000, 1474066800000, 1474153200000, 1474239600000, 1474326000000, 1474412400000, 1474498800000, 1474585200000, 1474671600000, 1474758000000, 1474844400000, 1474930800000, 1475017200000, 1475103600000, 1475190000000, 1475276400000, 1475362800000, 1475449200000, 1475535600000, 1475622000000, 1475708400000, 1475794800000, 1475881200000, 1475967600000, 1476054000000, 1476140400000, 1476226800000, 1476313200000, 1476399600000, 1476486000000, 1476572400000, 1476658800000, 1476745200000, 1476831600000, 1476918000000, 1477004400000, 1477090800000, 1477177200000, 1477263600000, 1477350000000, 1477436400000, 1477522800000, 1477609200000, 1477695600000, 1477782000000, 1477872000000, 1477958400000, 1478044800000, 1478131200000, 1478217600000]
},{
"name": "numOfEmails:",
"data": [6973, 19953, 24802, 11488, 3430, 5067, 4967, 11634, 11852, 5326, 11096, 10412, 11031, 7645, 181808, 50117, 68233, 8274, 140612, 166004, 46222, 17730, 236838, 85155, 22113, 90837, 21981, 58824, 90409, 32079, 126217, 165484, 152788, 8028, 85894, 12304, 10294, 3568, 100334, 131946, 8691, 7572, 7721, 253608, 817, 116161, 1104148, 1250817, 15616, 270738, 123211, 150237, 69436, 84920, 189798, 101596, 48121, 120699, 82919, 10025, 281948, 37501, 50315, 15240, 115791, 15799, 19682, 29942, 2128, 23952, 149181, 6535, 5]
}]

对于 xAxis，我使用 type: 'datetime' 但将日期显示为 00:00:00.010, 00:00:00.020, ...

我用来渲染图表的 JavaScript 文件如下:

$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container_chart',
            type: 'area',
        },
        title: {
            text: 'Emails received daily'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
            },

         xAxis: {
                type: 'datetime'
        },

        yAxis: {
            title: {
                text: 'Number received'
            },
        },
        legend: {
            enabled: false
        },

        plotOptions: {
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        },
        series: []
    }

    $.getJSON("./emailsCaptured_c2.json", function(json) {
    options.xAxis.categories = json[0]['data'];
        options.series[0] = json[1];
        chart = new Highcharts.stockChart(options);
    });
});

我尝试将 xAxis 调整为:

labels: {
    format: '{value:%d/%m/%Y}'
    }
}

这就是我想要的格式，但没有运气，我也尝试过以这种方式格式化 JSON 文件，而不是 EPOCH，它似乎适用于 HighCharts，但不适用于 HighStock。我选择 HighStock 的原因是为了 slider 和附加日期范围选项。

Answer 1

您犯的错误是定义轴的类别。 Highstock 不支持类别轴，实际上您的数据不包含 x 值，因此图表从 0000000000000 开始。

您可以将值映射为格式[timestamp, value]像这样:

var series = {
  name: json[1].name,
  data: (function () {
    var data = [], i = 0, dataLen = json[0].data.length;

    for (; i < dataLen; i++) {
      data.push([json[0].data[i], json[1].data[i]]);
    }

    return data;
  })()
};

示例:https://jsfiddle.net/vqhuo3hf/1/