【问题标题】：Xaxis Highcharts data loading issueXaxis Highcharts 数据加载问题
【发布时间】：2014-06-10 15:12:45
【问题描述】：

我正在使用 highcharts.js 实现一个图表，并且在通过 json 文件加载数据时遇到了问题。使用后我终于取得了一些成功： http://codeinjs.blogspot.in/2013/07/preprocess-json-data-to-use-in.html

我的数据库在一列中有日期，在另一列中有指标，我正在使用以下代码将两者都加载到图表中：

var processed_json = new Array();
        $.map(filter1, function(obj, i) {
             var date = new Date(obj.date_hour);
             processed_json.push([obj.date_hour, parseInt(obj.metric)]);
        });


        $(function () {
        $('#container').highcharts({
        chart: {
            zoomType:'xy'
        },
        title: {
            text: 'Trend Graph'
        },
        subtitle: {
            text: 'Metric, YOY and WOW'
        },
        xAxis: {
            type: "datetime",
            min:processed_json.date_hour,
            //minRange: 14 * 24 * 3600000, // fourteen days
            dateTimeLabelFormats: {
                day: '%b %e'
            }
        },
        series: [{
            type: 'column',
            data: processed_json,
            pointStart: processed_json.date_hour,
            //,Date.UTC(2012, 5, 1),
            pointInterval: 24 * 3600 * 1000 // one day
                }]
            });     
        });

现在，问题是正在加载所有指标数据，但未加载 x 轴上的日期。之前有一些随机值，现在加载日期从 1 月 1 日到 1 月 14 日。

我的日期是从 5 月 1 日到 5 月 14 日，或者它可能会随着我在 (filter1) 中的数据的变化而变化

所以，基本上 y 轴会随着数据动态变化，而 x 轴会随着日期变化。

我试过了

1

pointStart: processes_json.date_hour // 不工作

2

chart.series[0].update({ 点开始：已处理_json.date_hour， pointInterval: 24 * 3600 * 1000, // 一天数据：processed_json.metric }，错误的）; //也不行

有人可以给我一个更好的建议/方法来解决这个问题，在 x 轴上获取我的数据中的日期。

另外，如果可能的话，当我放大日期时，我希望它变成小时，然后是分钟，最后是秒。

欢迎所有建议。

更新：图片：http://tinypic.com/r/2s0ba4k/8

图像显示了我们绘制的图表，您可以看到 x 轴显示 1 月 1 日至 1 月 14 日，而在工具提示中显示的是正确的日期。

如何在 x 轴上显示正确的日期？

【问题讨论】：

请检查“processed_json.date_hour”是数组还是单例值。因为开始日期应该是一个特定值而不是一组值。

标签： javascript json date highcharts

【解决方案1】：

好的，这就是你如何创建processed_json：

var processed_json = new Array();
$.map(filter1, function(obj, i) {
     var date = new Date(obj.date_hour);
     processed_json.push([obj.date_hour, parseInt(obj.metric)]);
});

所以它是带有date_hour 和metric 的数组。现在，date_hour 应该是以毫秒为单位的数字和时间戳，例如：1402480061843。

现在，如果您将正确传递时间戳和值，那么您就不需要 pointStart 和 pointInterval。

顺便说一句，那个符号：pointStart: processed_json.date_hour, 将创建pointStart: 'undefined'，因为processed_json 是一个数组，而不是一个对象。应该是：processed_json[0][0]。

【讨论】：

【解决方案2】：

使用其他几个函数解决了这个问题，即 getYear（和类似的函数）和 Date.UTC。

这是我在 highcharts 的系列函数中使用的单行代码：

pointStart:Date.UTC(new Date(processed_json1[0][0]).getYear(),new Date(processed_json1[0][0]).getMonth(),new Date(processed_json1[0][0]).getDate())

现在，使用它，日期将按照 x 轴上数据集中给出的动态变化。

【讨论】：