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的原因是滑块和附加日期范围选项。

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/

在HighStock chart

1 个答案: