1

Question

我正在使用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：processed_json.date_hour //无法正常工作

2

chart.series [0] .update（{ pointStart：processed_json.date_hour， pointInterval：24 * 3600 * 1000，//一天 data：processed_json.metric }，false）; //也没有用？

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

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

欢迎所有建议。

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

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

我该怎么做才能在x轴上显示正确的日期？

Answer 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应该是以ms为单位的数字和时间戳，例如：1402480061843。

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

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

Answer 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轴上的数据集中所示。

Xaxis Highcharts数据加载问题

1

2

2 个答案: