Question

我正在尝试使用高级图表显示图表。我希望在x轴上12小时格式时间（小时），并且y轴应该具有最小值0和最大值5，步长为0.5。（即，0,0.5,1.0,1.5 ... 5）。图表的数据应来自返回Json数据的webservice。还有一件事是我不会使用整个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轴应遵循上述条件。现在我想要这样的东西。如果你认为Tom和Jim都在2月4日加入，那么时间就不同了。所以在我的X轴上，如果我有1,2,3,4 ...... 12（小时）的东西，汤姆和吉姆应该介于2和2之间。 3我不知道该怎么做。谁能帮帮我吗。如果您知道任何其他符合此要求的图表，请同时发布。如果您提供样品......那将非常有用提前谢谢你问候
HEMA

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
    }]
});

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

1 个答案: