Данные серии Highcharts из объекта JSON

Question

Я новичок в JSON и MVC, так что вот моя проблема. В настоящее время я работаю над графиками, используя высокие графики. У меня есть контроллер, который возвращает объект JSON.

 public JsonResult _GetChart_TrendPublicationTypeDetailed_Data(int 
 yearToDisplay)
    {
        //Types of publications to be considered
        string[] publication_types = new string[] { "article", "book", "book_section", "conference_proceedings" };

        //Get the list of outputs with usp authors
        var uspPubs = _uspAuthoredPublications();

        //List of years for which to display the data
        List<int> yearRange = _getListOfYears(yearToDisplay, yearRangeFactor_10);

        //Get the data
        var data = from eprint_summary in localDB.Summary
                   where
                   eprint_summary.Year > (yearToDisplay - yearRangeFactor_10)
                   && eprint_summary.Year <= yearToDisplay
                   && publication_types.Contains(eprint_summary.TypeCode)
                   && uspPubs.Contains(eprint_summary.EprintId)
                   //&& eprint_summary.refereed == "TRUE" //TODO: Confirm whether we need this filter in our counts
                   group eprint_summary by new { eprint_summary.Year, eprint_summary.TypeDesc } into typeTrend
                   orderby typeTrend.Key.Year, typeTrend.Key.TypeDesc
                   select new
                   {
                       Year = typeTrend.Key.Year,
                       Type = typeTrend.Key.TypeDesc,
                       Count = typeTrend.Count()
                   };

        //Extract the series data
        List<object> countData = new List<object>();
        foreach (var item in data.ToList().Select(y => y.Type).Distinct().OrderBy(y => y))
        {
            List<int> yearlyData = new List<int>();
            foreach (var year in yearRange)
            {
                var rec = data
                            .Where(y => y.Type == item)
                            .Where(y => y.Year == year)
                            .Select(y => y.Count).ToArray();
                yearlyData.Add(
                                rec == null || rec.Length == 0 ? 0 : rec[0]
                            );
            }

            countData.Add(
                            new
                            {
                                name = item, //Name of the series
                                data = yearlyData.ToArray() //Array of data
                            }
                        );
        }

        //Form the json object using the series data and labels
        return Json(
                new
                {
                    labels = yearRange.ToArray(),
                    series = countData
                },
                JsonRequestBehavior.AllowGet
            );
    }

Выше мой JSON в контроллере.

У меня есть мое представление, как показано ниже, где я получаю объект JSON, но я не знаю, как добавить к моему графику в виде ряда. Как бы я преобразовал объект JSON во что-то, что принимает серия.

var seriesData = ' ';
var test = ' ';

function ajaxCall() {
    $.ajax({
        type: "post",
        datatype: "Json",
        async: true,
        url: '@Url.Action("_GetChart_TrendPublicationTypeDetailed_Data", "ResearchCharts")',
        data: { yearToDisplay: '@(DateTime.Now.AddYears(-1).Year.ToString())' },
        success: function (data) {
            seriesData = data;
            test = seriesData.series;
            //bindChart(test);
            //alert(JSON.stringify(seriesData));
            alert(JSON.stringify(test));

        },
        error: function () {
            alert("An error occurred.");
        }
    });
}
//functions call
ajaxCall();
bindChart(test);

function bindChart(test) {

    var test2 = [{ "name": "Book", "data": [14, 17, 9, 10, 6, 19, 6, 8, 0, 4] }, { "name": "Book Chapter", "data": [65, 74, 44, 66, 9, 23, 36, 51, 53, 36] }, { "name": "Conference Proceedings", "data": [15, 17, 27, 30, 28, 54, 35, 43, 50, 35] }, { "name": "Journal Article", "data": [178, 162, 133, 139, 133, 191, 160, 194, 149, 169] }];
    $('#chartTrendsPublicationTypeDetailed').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'My data'
        },
        xAxis: {
            categories: ['2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016']
        },
        series: test2//[{ "name": "Book", "data": [14, 17, 9, 10, 6, 19, 6, 8, 0, 4] }, { "name": "Book Chapter", "data": [65, 74, 44, 66, 9, 23, 36, 51, 53, 36] }, { "name": "Conference Proceedings", "data": [15, 17, 27, 30, 28, 54, 35, 43, 50, 35] }, { "name": "Journal Article", "data": [178, 162, 133, 139, 133, 191, 160, 194, 149, 169] }]


    });

Пожалуйста, помогите, просто нужно как-то передать данные в старшие чарты. На рисунке я добавил серию вручную, и она работает, но мне нужно передать переменную, которую принимает свойство серии.

Answer 1

Старый код рендеринга Highcharts:

$('#chartTrendsPublicationRankDetailed').highcharts({
       chart: {
           type: 'line'
       },
       title: {
           text: 'My data'
       },
       xAxis: {
           categories: labels
       },
       series: seriesData

   });
Новый код рендеринга Highcharts. Это успешно принимает мои объекты JSON и отображает графики.
function bindChartItemType(seriesData, labels) {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chartTrendsPublicationTypeDetailed',
        type: 'line',
        height: 500,
        width: 500
    },
    credits: {
        enabled: false
    },
    title: {
        text: 'Trend of Publications by Item Type'
    },
    xAxis: {
        categories: labels,
        title: {
            text: '<b>Year</b>'
        }
    },
    yAxis: {
        min:0,
        title: {
            text: '<b># of publications</b>'
        }
    },
    series: seriesData
});

}

Не стесняйтесь добавлять все, что вам нравится в комментариях.

С уважением Шафраз Букш