asp.net mvc highchart linegraph json

问题

I'm trying to get the line-example at: http://www.highcharts.com/demo/line-basic/grid working with a jsonresult, but can't figure out how to achieve this.

The controler code:

public JsonResult GetLineData()
    {
        Dictionary<string, double[]> retVal = new Dictionary<string, double[]>();
        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);
    }

My jqquery looks like this:

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 '<b>' + this.series.name + '</b><br/>' +
           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();
        });


    });

The chart shows up without an error, but also without the two lines. I guess the series are not builded the right way? Thanks in advance for your help.

回答1:

Try this. I am assuming item.Value is an array which can be used as data to be provided to the chart.

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

回答2:

I think all you need to do is instead of

options.series.push(series);

do

options.series = series;

or else your pushing the entire array as a single item into an array

回答3:

With DotNet.Highcharts you don't need to think how to pass data from the action method to the javascript. You can construct and bind everything on the server side. Here is the example for the Basic Line with this library:

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 '<b>'+ this.series.name +'</b><br/>'+
                                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);
    }

You also can find a lot of MVC samples here: http://dotnethighcharts.codeplex.com/releases/view/80650

来源：https://stackoverflow.com/questions/6411976/asp-net-mvc-highchart-linegraph-json