Einfaches Balkendiagramm in jQuery HighCharts und MVC 2-Anwendung?

Question

Ich versuche, ein sehr einfaches Balkendiagramm mit den Ergebnissen einer JSon-Aktionsmethode in MVC zu erstellen. Ich bekomme das eigentliche Balkendiagramm, aber ich verstehe die Optionen nicht und alles gut genug, also rate ich im Grunde, was ich tun soll. Ich habe das Beispiel auf der HighCharts-Site als Beispiel dafür verwendet, wie man Daten vom Server-Code bezieht und ein Diagramm erstellt. Der Unterschied ist, dass mein Diagramm einfacher als das Beispiel ist. Ich habe keine Kategorien für jeden Benutzer (wie im Beispiel der Frucht), ich habe nur einen Benutzer und eine Anzahl von Stunden protokolliert.

Hier ist der HighCharts jQuery-Code:

function getHighChart() { 
      var actionUrl = '<%= Url.Action("GetChartData") %>'; 
      var customerId = $('#customersId').val(); 
      var startdate = $('.date-pickStart').val(); 
      var enddate = $('.date-pickEnd').val(); 

      var options = { 
       chart: { 
        renderTo: 'chart-container', 
        defaultSeriesType: 'bar' 
       }, 
       title: { 
        text: 'Statistik' 
       }, 
       xAxis: { 
        categories: [] 
       }, 
       yAxis: { 
        title: { 
         text: 'Timmar' 
        } 
       }, 
       series: [] 
      } 
      jQuery.getJSON(actionUrl, 
         { customerId: customerId, startdate: startdate, enddate: enddate }, function (items) { 
          var series = { 
           data: [] 
          }; 

          $.each(items, function (itemNo, item) { 
           series.name = item.Key; 
           series.data.push(parseFloat(item.Value)); 
          }); 

          options.series.push(series); 
          var chart = new Highcharts.Chart(options); 
         });       
     } 

Und hier ist die Aktion-Methode JSon Rückkehr:

public JsonResult GetChartData(string customerId, string startdate, string enddate) 
    { 
     int intcustomerId = Int32.Parse(customerId); 

     var emps = from segment in _repository.TimeSegments 
        where 
         segment.Date.Date >= DateTime.Parse(startdate) && 
         segment.Date.Date <= DateTime.Parse(enddate) 
        where segment.Customer.Id == intcustomerId 
        group segment by segment.Employee 
         into employeeGroup 
         select new CurrentEmployee 
         { 
          Name = employeeGroup.Key.FirstName + " " + employeeGroup.Key.LastName, 
          CurrentTimeSegments = employeeGroup.ToList(), 
          CurrentMonthHours = employeeGroup.Sum(ts => ts.Hours) 
         }; 
     Dictionary<string, double > retVal = new Dictionary<string, double>(); 
     foreach (var currentEmployee in emps) 
     { 
      retVal.Add(currentEmployee.Name, currentEmployee.CurrentMonthHours); 
     } 
     return Json(retVal.ToArray(), JsonRequestBehavior.AllowGet); 
    } 

konnte ich ein Kreisdiagramm erstellen, aber jetzt, wenn ich will ein einfach erstellen bar Ich kann nicht herausfinden, was im jQuery-Code enthalten ist. Die Ergebnisse, die ich erhalte, sind also eine Leiste, in der der einzige in der Legende aufgeführte Benutzer der letzte im Array ist. Zweitens zeigt der Tooltip x = [Name des Benutzers], y = 29, anstelle von [Name des Benutzers]: 29, was ich in das Tortendiagramm bekommen habe.

Wie würde ich solch ein einfaches Balkendiagramm in HighCharts von diesem JSon erstellen?

Answer 1

Nun, ich war es aus mir doch ... Ich dachte, dass ich es für den Fall, wie ich einige andere HighCharts Neuling schreiben sollte interessiert:

Hier ist die jQuery, die funktioniert:

function getHighChart() { 
     var actionUrl = '<%= Url.Action("GetChartData") %>'; 
     var customerId = $('#customersId').val(); 
     var customerName = $('#customersId option:selected').text(); 
     var startdate = $('.date-pickStart').val(); 
     var enddate = $('.date-pickEnd').val(); 
     //define the options 
     var options = { 
      chart: { 
       renderTo: 'chart-container', 
       defaultSeriesType: 'column' 
      }, 
      title: { 
       text: 'Hours worked for ' + customerName 
      }, 
      xAxis: { 
       categories: [customerName] 
      }, 
      yAxis: { 
       title: { 
        text: 'Hours' 
       } 
      }, 
      series: [] 
     }; 

     //Calls the JSON action method 
     jQuery.getJSON(actionUrl, 
        { customerId: customerId, startdate: startdate, enddate: enddate }, function (items) { 

         $.each(items, function (itemNo, item) { 
          var series = { 
           data: [] 
          }; 
          series.name = item.Key; 
          series.data.push(parseFloat(item.Value)); 
          options.series.push(series); 

         }); 
         var chart = new Highcharts.Chart(options); 
        }); 
    } 

wenn jemand Fehler in dieser finden und zeigen sie mir einen besseren Weg, es zu tun, ich werde gerne die Antwort Kredit übergeben, sonst werde ich meine eigene Antwort akzeptieren ...

Answer 2

ich benutze:

//Controller action: 
public JsonResult GetData(int id) 
{ 
Dictionary<int, double> data = this.repository.GetData(id); 
return Json(data.ToArray(), JsonRequestBehavior.AllowGet); 
} 

Ausblick:

<script> 
var chart1;  
$(document).ready(function() { 
    chart1 = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chart-container-1', 
      defaultSeriesType: 'scatter', 
      events: { 
       load: requestData 
      } 
     },   
     options... 
     , 
     series: [{ 
      name: 'some data', 
      data: []    
     }] 
    }); 
} 
); 

function requestData() { 
    $.ajax({ 
     url: '/ControllerName/GetData?id=@(Model.Id)', 
     success: function (items) {  
      $.each(items, function (itemNo, item) { 
       chart1.series[0].addPoint([item.Key,item.Value], false);  
      });  
      chart1.redraw(); 
     }, 
     cache: false 
    }); 
}  
</script> 
<div id="chart-container-1"></div> 

Also im Grunde benutze ich addPoint ('Array von x, y', false für nicht neu gezeichnet Grafik)