Highcharts-JSON系列数据无法正确显示

Question

I have the following Highcharts sample that I've done in Fiddle as the basis as what I'd want to do using MVC and JSON: Fiddle Link to Example

I'd like to re-create it in MVC using JSON. This is the result of my code:

This is definitely wrong as it is only showing the first value of the array and not displaying the rest.

This is how I'm building the array:

  Dictionary<string, double[]> columnData = new Dictionary<string, double[]>();
  double[] Array1 = { 49.9, 71.5, 106.4, 129.2 };
  columnData.Add("IE", Array1);

  double[] Array2 = { 83.6, 165, 45, 97.2};
  columnData.Add("FireFox", Array2);

  double[] Array3 = { 92, 125, 32, 83.5 };
  columnData.Add("Chrome", Array3);

  double[] Array4 = { 42.4, 54.2, 55.3, 54.3 };
  columnData.Add("Opera", Array4);

  return Json(columnData.ToArray(), JsonRequestBehavior.AllowGet);

I think that the data is set up properly and the problem is in the javascript code to push the data.

jQuery.getJSON("GetColumnChartData", null, function (items) {
    var series = {
                   type: 'column',
                   data: []
                 };

jQuery.each(items, function (itemNo, item) {
               series.data.push([item.Key, parseFloat(item.Value)])
               });

options.series.push(series);

I think I need to loop through the returned "item" to get the other series data. I'm in a brain fart and think that someone may be able to look at it and know what the problem is in a few minutes than the hour that I've already spent trying to fix this. After this is done I'll have to change the hard code categories (ie "Educational", "Non-Profit", "Business", "Personal") to be build dynamically. But that's after I get this fixed.

Thanks for taking the time to look.

Answer 1

Assuming your data looks something like this:

var items = [
    { 
      name : 'Firefox',
      values : [x, x, x, x]
    },
...
]

jQuery.getJSON("GetColumnChartData", null, function (items) {
    var series = [];
//you could use series = items.map(function(item){...}); 
jQuery.each(items, function (item) {
    series.push({
        name : item.name,
        data : item.values
     });
});
options.series = series;
});

I hope that helps.