来自JSON对象的Highcharts系列数据

我是JSON和mvc的新手，所以这是我的问题。我目前正在使用highchart制作图表。我有一个返回一个JSON对象的控制器。来自JSON对象的Highcharts系列数据

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] }] 


    });

请帮助，只需要以某种方式将数据传递给highcharts。在图片中，我已经手动添加了该系列并且它可以工作，但是我需要传入一系列属性接受的变量。

来源

2017-07-04 shafraz buksh

你的链接的描述丢失。你需要把你最小的工作例子放在问题本身。 – Brick

对不起，我添加了图像。我会把代码放下。 –

我已更新我的问题，请让我知道。 @砖 –

旧Highcharts渲染代码：

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

 
    }); 

New Highcharts rendering code. This accepts my JSON objects successfully and renders the graphs. 

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 
});

}

随意添加任何你在评论喜欢。

问候 Shafraz Buksh

来源

2017-07-12 21:26:02

来自JSON对象的Highcharts系列数据

回答

相关问题