Question

我想画一个Line Graph with irregular Time interval。我想通过Ajax调用将数据传递给它。我该怎么做？

我的数据格式如下 -

result = {u'New Delhi': [[1383741000000L, 54.2], [1383741900000L, 59.34], [1383742800000L, 64.3]], u'Bangalore': [[1383741000000L, 1608.2], [1383741900000L, 1611.3], [1383742800000L, 1612.29]]}

即

result = {'name1':[[time1(in secs), value1][time1(in secs), value1]], 'name2':[[time1(in secs), value1][time2(in secs), value2]] }

就像这样。

series: [{
    name: result.keys(),
    data: result.values()
}]

我应该得到两条线和它们各自的值。

如何将值传递给数据。？

这是我的代码这就是我的结果。

var result = [{  // this value is to be passed downwards.
    'data': [
        [1383741000000, 1608.3000000000002],
        [1383741900000, 1611.9999999999973],
        [1383742800000, 1612.299999999997]
    ],
    'name': 'Bangalore'
}, {
    'data': [
        [1383741000000, 54.2],
        [1383741900000, 54.300000000000004],
        [1383742800000, 54.300000000000004]
    ],
    'name': 'New Delhi'
}]

$(function () {
        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: result,  // over here. I'm not getting the line.
        });
    });

我该怎么办？

Answer 1

成功回调ajax调用将响应传递给将按照所需格式为您解析数据的方法。

现在将其传递给highcharts并构建图表

Answer 2

问题是您正在设置类别（一个类别= 1个值），然后您使用时间戳来显示行。让我们考虑：1383741000000 - 这意味着显示1383741000000th类别并显示1383741000000个刻度和名称。这是不可能的。

解决方案：删除类别并设置xAxis.type = "datetime"

工作示例：http://jsfiddle.net/3bQne/707/

如何在我的highcharts中传递Ajax响应数据

2 个答案: