Как использовать вызов ajax для заполнения линейного графика в старших графиках

0

Я пытаюсь сделать простой графический граф с highcharts в asp.net. Хотя я не могу получить ничего. Вот что я получил до сих пор:

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>

edit: Решил проблему.
data.sort(function (a, b) {return 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
                    },
                });
Теги:
asp.net-mvc
charts
highcharts

1 ответ

1
Лучший ответ

У вас две проблемы.

1.) Highcharts не имеет понятия, что делать с вашими произвольными свойствами. Что соответствует значениям X и Y? Он очень специфичен в отношении того, как данные должны быть отформатированы. Я предполагаю, что вы хотите Year как Х и 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']};
});

Вот скрипка.

  • 0
    Хорошо, это имеет смысл. Я попробую. Мой вопрос тогда будет ли это медленнее, чем редактирование, которое я сделал выше? Прямо сейчас генерация графика занимает много времени, например ~ 8 секунд, делая это так, как я добавляю все отдельные точки.
  • 0
    Обнаружил ошибку при сортировке данных. Отредактированный код выше, чтобы показать рабочую версию

Ещё вопросы

Сообщество Overcoder
Наверх
Меню