asp.net-mvc如何使用 ajax 调用来填充在 highcharts 线图

发布时间: 2016/10/9 6:06:56
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我试图在 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
                    },
                });

解决方法 1:

你有两个问题。

1.) Highcharts 已经不知道什么密谋与你任意系列属性。所对应的 X 和 Y 值? 它是非常具体如何需要被格式化的数据。 我假设你想要 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']};
});

这里是小提琴

赞助商