使用高图表以图形表示方式显示ajax数据

Question

我正在尝试使用High图表显示图形。我想要x轴和y轴上的12小时格式时间（小时）的最小值为0，最大值为5，步长为0.5。（即，0,0.5,1.0,1.5…5）。图表的数据应该来自返回Json数据的Web服务。这里还有一件事，我不会使用整个JSON数据。让我们假设我的JSON是否是这样的：

      [  
            {  
               "Id": 1,  
               "Name": "Tom",  
               "DOJ": "Feb 4, 2011 2:55:45 AM",  
               "Experience" : "2"
            },
            {  
               "Id": 2,  
               "Name": "Jim",  
               "DOJ": "Feb 4, 2011 2:05:45 AM",  
               "Experience" : "3"
            } ,
            {  
               "Id": 3,  
               "Name": "Jane",  
               "DOJ": "Feb 4, 2011 09:05:45 AM",  
               "Experience" : "3"
            }   
           {  
               "Id": 4,  
               "Name": "John",  
               "DOJ": "Feb 4, 2011 10:05:45 AM",  
               "Experience" : "3"
            },
            {  
               "Id": 5,  
               "Name": "Tim",  
               "DOJ": "Feb 4, 2011 2:55:45 AM",  
               "Experience" : "4"
            } ,
            {  
               "Id": 6,  
               "Name": "Jerry",  
               "DOJ": "Feb 4, 2011 2:20:10 AM",  
               "Experience" : "3.5"
            }   
        ]

我想在x轴上显示加入日期，在y轴上显示经验。X轴和Y轴应符合上述条件。现在我想要这样的东西。如果你认为汤姆和吉姆都是2月4日加入的，只是时间不同而已。所以在我的X轴上，如果我有1、2、3、4……12（小时）汤姆和吉姆应该在2&3我不知道该怎么做。有人能帮我吗？如果你知道任何其他可以满足这一要求的图表，也请发布。如果你提供样品。。。那真的很有帮助
提前感谢
问候
盒马

Answer 1

您需要将日期解析为时间戳，例如：http://jsfiddle.net/3bQne/1108/

var json = [{
    "Id": 1,
        "Name": "Tom",
        "DOJ": "Feb 4, 2011 2:55:45 AM",
        "Experience": "2"
}, {
    "Id": 2,
        "Name": "Jim",
        "DOJ": "Feb 4, 2011 2:05:45 AM",
        "Experience": "3"
}, {
    "Id": 3,
        "Name": "Jane",
        "DOJ": "Feb 4, 2011 09:05:45 AM",
        "Experience": "3"
}],
    data = [],
    jLen = json.length,
    i = 0;

for(; i < jLen; i++){
    var p = json[i];
    data.push({
        name: p.Name,
        y: parseFloat(p.Experience),
        id: p.Id,
        x: (new Date(p.DOJ)).getTime()
    });
}

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'scatter'
    },        
    yAxis: {
        minTickInterval: 0.5    
    },
    xAxis: {
        type: 'datetime'    
    },
    series: [{
        data: data
    }]
});