如何使用ajax调用在highcharts中填充折线图

Question

我正在尝试在 asp.net 中使用 highcharts 绘制一个简单的折线图。我无法画出任何东西。到目前为止，这是我所得到的：

var chart;

    $(document).ready(function () {
        chart = new Highcharts.Chart({  
            chart: {
                renderTo: 'container',
                type: 'line'  
            },
            title: {
                text: 'Rank vs. Time'
            },    
            xAxis: {
                numerical: [],
                title: {
                    text: 'Year'
                }
            },
            yAxis: {
                title: {
                    text: 'Rank'
                }
            },

        });
        getData();
    });

function getData() {
        $.ajax({
            type: "GET",
            url: "/api/Name/GetBoyNamesByYear?name=matthew",
            success: function (data) {
                chart.addSeries({
                    name: "Matthew",
                    data: data
                });
            },
            cache: false
        });
    }    

我的 ajax 以

的格式返回一些东西

 [{"$id":"1","Year":1995,"Rank":2},{"$id":"2","Year":1996,"Rank":2},{"$id":"3","Year":1981,"Rank":3},{"$id":"4","Year":1982,"Rank":3}, .......

如果它在我的 html 中很重要，我有：

<div id="container" style="width:100%; height:400px;"></div>

编辑：解决了这个问题。
data.sort（函数（a，b）{ 返回 a.Year > b.Year ？ 1：-1； });

                data = $.map(data, function (i) {
                    return { x: i['Year'], y: i['Rank'] };
                });

                chart.addSeries({
                    name: "Matthew",
                    data: data,
                    marker: {
                        enabled: true,
                        radius: 1
                    },
                });

Answer 1

你有两个问题。

1.) Highcharts 不知道用您的任意系列属性绘制什么。什么对应于 X 和 Y 值？ how the data needs to be formatted 非常具体。我假设您希望 Year 作为 X 和 Rank 作为 Y。

2.) 您的数据未按 X 值排序。

结合这两个问题：

var data = [{"$id":"1","Year":1995,"Rank":2},{"$id":"2","Year":1996,"Rank":2},{"$id":"3","Year":1981,"Rank":3},{"$id":"4","Year":1982,"Rank":3}];

data.sort(function(a,b){return a['Year'] > b['Year']});

data = $.map(data, function(i){
    return {x: i['Year'],y: i['Rank']};
});

这是fiddle。