Я пытаюсь сделать простой графический граф с 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
},
});
У вас две проблемы.
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']};
});
Вот скрипка.