Правильный метод заполнения поля диаграммы Highcharts с использованием JSON

Question

Хотя у меня был успех с созданием Highcharts Box-and-Whisker plot путем записи статических значений на страницу просмотра MVC 5, теперь я пытаюсь сделать то же самое, заполнив значения с помощью JsonResult функции в контроллере.

Веб-сайт Highcharts имеет раздел на custom preprocessing data using JSON, но я до сих пор не увенчался успехом, используя метод, показанный на этом URL-адресе, только изменяя тип диаграммы на «boxplot» и определяя параметры. Поле предупреждения показывает, что значения данных успешно считываются из функции JsonResult, но диаграмма отображается без данных, которые я ожидаю увидеть.

Я проверил с Firebug и не видел ошибок jQuery при просмотре страницы в браузере.

Я пропустил что-то очевидное здесь? Я использую MVC 5 C# в Visual Studio.

@section scripts 
{ 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
    <script src="https://code.highcharts.com/highcharts-more.js"></script> 
    <script> 
     $(function() { 

      var options = { 
       chart: { 
        renderTo: 'container', 
        type: 'boxplot'      
       },     
       series: [{}] 
      };      

      $.ajax({ 
       dataType: "json", 
       type: "POST", 
       url: "@Url.Action("GetChartData")",     
       cache: false, 
       async: false, 
       data: { _campus: "@ViewBag.SelectedCampus", 
         _semester: "@ViewBag.SelectedSemester", 
         _fy: "FY12" }, 
       success: function (data) { 

        options.series[0].data = data; 
        var chart = new Highcharts.Chart(options); 
        alert(data); // I see the correct array set in the alert box: 
           // as written literally: 395,441,457,479,532 
       }, 
       error: function (jqXHR, textStatus, errorThrown) { 
        alert("oops: " + textStatus + ": " + jqXHR.responseText); 
       } 
      }); 
     }); 
    </script> 
} 

Это скриншот того, что он выглядит следующим образом:

В случае это имеет значение, здесь есть функция JsonResult:

public JsonResult GetChartData(string _campus, string _semester, string _fy) 
     { 
      IEnumerable<MathAimsScaleScore> query = db.MathAimsScaleScores 
       .Where(m => m.Campus == _campus) 
       .Where(m => m.Semester == _semester) 
       .Where(m=>m.FY==_fy); 

      var FyList = query.Select(m => Convert.ToDouble(m.ScaleScore)); 
      var jsonList = new double[5]; 

      for (int i = 0; i < 5; i++) 
      { 
       jsonList[i] = Statistics.FiveNumberSummary(FyList)[i]; 
      } 

      return Json(jsonList.ToArray()); 
     } 

Answer 1

Вы снабжающий массив данных [395,441,457,479,532] на ваш график, который интерпретируется как 5 отдельных точек данных.

Это приводит к тому, что вы выложили:

(так, если вы сделаете что линейный график с точно таким же массивом данных, вы видите, что схема пытается сделать с данными вы при условии:

, но, так как вы не можете нарисовать окно участок только с одной точки, ничего не отображается)

.

Что вам нужно предоставить это массив массивов, где каждая точка имеет 5 значений:

data: [[395,441,457,479,532]] 

Таким образом, внутренние скобки содержат одну точку данных с информацией диаграммы необходимо нарисовать boxplot:

Fiddle пример:

• Разбитое: http://jsfiddle.net/jlbriggs/cjmmj3hh/
• Исправлено: http://jsfiddle.net/jlbriggs/cjmmj3hh/2/

Answer 2

Я нашел другой подход, реструктуризации и мой JsonResult и JQuery блок.

@jlbriggs был полезен из-за комментария «Array of Array», который я мог видеть в качестве виновника.

Я прошел еще несколько итераций, сделав код более простым и менее повторяющимся. Эта текущая итерация позволяет заполнить весь график одним вызовом ajax.

// Called from JsonResult (and other functions in the controller). 
public int[] GetFiveNumberSummary(string _campus, string _semester, string _fy) 
     { 
      IEnumerable<MathAimsScaleScore> query = db.MathAimsScaleScores 
       .Where(m => m.Campus == _campus) 
       .Where(m => m.Semester == _semester) 
       .Where(m => m.FY == _fy); 

      var FyList = query.Select(m => Convert.ToDouble(m.ScaleScore)).ToList(); 

      var reply = new int[5]; 
      for (int i = 0; i < 5; i++) 
      { 
       reply[i] = Convert.ToInt32(Statistics.FiveNumberSummary(FyList)[i]); 
      } 
      return reply;  
     } 

     public JsonResult GetChartData(string _campus, string _semester) 
     {   

      var FyArray0 = GetFiveNumberSummary(_campus,_semester,"FY12").ToArray(); 
      var FyArray1 = GetFiveNumberSummary(_campus, _semester, "FY13").ToArray(); 
      var FyArray2 = GetFiveNumberSummary(_campus, _semester, "FY14").ToArray(); 
      var FyArray3 = GetFiveNumberSummary(_campus, _semester, "FY15").ToArray(); 

      int [][] FyArrayBox = new int[4][]; 
      FyArrayBox[0] = FyArray0; 
      FyArrayBox[1] = FyArray1; 
      FyArrayBox[2] = FyArray2; 
      FyArrayBox[3] = FyArray3; 

      foreach (var item in FyArrayBox) 
      { 
       Debug.WriteLine(item); 
      } 

      return Json(FyArrayBox.ToArray()); 
     } 

Я также отреставрировал jQuery. Что отличает это от демонстрации на Highcharts, так это то, что я определяю переменные массива и «массив массивов» в самом начале скрипта и явно заполняю их в функции $ .ajax.

переменная options относится к предопределенному «массиву массивов», который имеет значения во время создания диаграммы.

@section scripts 
{ 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
    <script src="https://code.highcharts.com/highcharts-more.js"></script> 
    <script> 
     $(function() { 
      // Create empty arrays to hold the data sets 

      var DataFy12 = []; 
      var DataFy13 = []; 
      var DataFy14 = []; 
      var DataFy15 = []; 
      var DataAll = []; 

      // This is the chart definition that will be called once $.ajax completes 

      var options = { 
       chart: { 
        renderTo: 'container', 
        type: 'boxplot' 
       }, 
       title: { text: 'Box-and-Whisker Plot' }, 
       legend: { enabled: false }, 
       xAxis: { 
        title: { text: 'School Year' }, 
        categories: ['FY12', 'FY13', 'FY14', 'FY15'] 
       }, 
       yAxis: { 
        title: { text: 'Scale Score' } 
       }, 
       series: [{ 
        name: "Scale Scores", 
        data: DataAll 
        }] 
      }; 

      $.ajax({ 
       dataType: "json", 
       type: "POST", 
       url: "@Url.Action("GetChartData")", 
       cache: false, // I want to make sure the most recent data is read 
       async: false, // For some reason this needs to be set false 
       data: { 
        _campus: "@ViewBag.SelectedCampus", 
        _semester: "@ViewBag.SelectedSemester" 
       }, 
       success: function (data) { 

        // the function calls an "array of arrays",      
        // where y is the array at location x 

        $.each(data, function (x, y) {       
         // divert array elements to correct jQuery array 

         switch (x) { 
          case 0: 
           for (i = 0; i < 5; i++) 
           { 
            DataFy12.push(y[i]); 
           }         
           break; 
          case 1: 
           for (i = 0; i < 5; i++) { 
            DataFy13.push(y[i]); 
           } 
           break; 
          case 2: 
           for (i = 0; i < 5; i++) { 
            DataFy14.push(y[i]); 
           } 
           break; 
          case 3: 
           for (i = 0; i < 5; i++) { 
            DataFy15.push(y[i]); 
           } 
           break; 
          default: 
           alert('case else'); 
         } 
        });  

        // The "DataAll" array is the "array of arrays" 
        // Pushing the each array into DataAll 
        // gives Highcharts the data set in a form it understands 

        DataAll.push(DataFy12); 
        DataAll.push(DataFy13); 
        DataAll.push(DataFy14); 
        DataAll.push(DataFy15); 

        // alert(DataAll) -- Data is verified to be correct 

        var chart = new Highcharts.Chart(options); 
       }, 
       error: function (jqXHR, textStatus, errorThrown) { 
        alert("oops: " + textStatus + ": " + jqXHR.responseText); 
       } 
      });    

     }); 
    </script> 
}