asp.net mvc highchart linegraph json

我正在尝试使用jsonresult的http://www.highcharts.com/demo/line-basic/grid获取行示例，但无法弄清楚如何实现这一点。

控制器代码：

public JsonResult GetLineData() { Dictionary retVal = new Dictionary(); double[] Array1 = {7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6}; retVal.Add("Tokyo", Array1); double[] Array2 = { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5 }; retVal.Add("New York", Array2); return Json(retVal.ToArray(), JsonRequestBehavior.AllowGet); } 

我的jqquery看起来像这样：

 var chart; $(document).ready(function () { var options = { chart: { renderTo: 'container', defaultSeriesType: 'line', marginRight: 130, marginBottom: 25 }, title: { text: 'Monthly Average Temperature', x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '' + this.series.name + '
' + this.x + ': ' + this.y + '°C'; } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 100, borderWidth: 0 }, series: [] }; //Calls the JSON jQuery.getJSON("GetLineData", null, function (items) { var series = { name: '', data: [] }; jQuery.each(items, function (itemNo, item) { //Get the items from the JSON and add then //to the data array of the series series.data.push({ name: item.Key, data: item.Value }) }); options.series.push(series); //Create the chart chart = new Highcharts.Chart(options); chart.render(); }); }); 

图表显示没有错误，但没有两行。 我猜这个系列没有以正确的方式建造？ 在此先感谢您的帮助。

Answer 1

试试这个。 我假设item.Value是一个数组，可以用作提供给图表的数据。

 //Calls the JSON jQuery.getJSON("GetLineData", null, function (items) { var series = []; jQuery.each(items, function (itemNo, item) { //Get the items from the JSON and add then //to the data array of the series series.push({ name: item.Key, data: item.Value }) }); options.series = series; //Create the chart chart = new Highcharts.Chart(options); chart.render(); }); 

Answer 2

我想你需要做的就是代替

 options.series.push(series); 

做

 options.series = series; 

或者将整个数组作为单个项目推送到数组中

Answer 3

使用DotNet.Highcharts，您无需考虑如何将数据从操作方法传递到javascript。 您可以在服务器端构造和绑定所有内容。 以下是使用此库的Basic Line的示例：

 public ActionResult BasicLine() { Highcharts chart = new Highcharts("chart") .InitChart(new Chart { DefaultSeriesType = ChartTypes.Line, MarginRight = 130, MarginBottom = 25, ClassName = "chart" }) .SetTitle(new Title { Text = "Monthly Average Temperature", X = -20 }) .SetSubtitle(new Subtitle { Text = "Source: WorldClimate.com", X = -20 }) .SetXAxis(new XAxis { Categories = ChartsData.Categories }) .SetYAxis(new YAxis { Title = new XAxisTitle { Text = "Temperature (°C)" }, PlotLines = new[] { new XAxisPlotLines { Value = 0, Width = 1, Color = ColorTranslator.FromHtml("#808080") } } }) .SetTooltip(new Tooltip { Formatter = @"function() { return ''+ this.series.name +'
'+ this.x +': '+ this.y +'°C'; }" }) .SetLegend(new Legend { Layout = Layouts.Vertical, Align = HorizontalAligns.Right, VerticalAlign = VerticalAligns.Top, X = -10, Y = 100, BorderWidth = 0 }) .SetSeries(new[] { new Series { Name = "Tokyo", Data = new Data(new object[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 }) }, new Series { Name = "New York", Data = new Data(new object[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5 }) }, new Series { Name = "Berlin", Data = new Data(new object[] { -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0 }) }, new Series { Name = "London", Data = new Data(new object[] { 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8 }) } } ); return View(chart); } 

你也可以在这里找到很多MVC样本： http ： //dotnethighcharts.codeplex.com/releases/view/80650