jQuery HighChartsとMVC 2アプリケーションの単純な棒グラフですか？

Question

MVCでJSonアクションメソッドの結果を使用して非常に単純な棒グラフを作成しようとしています。私は実際の棒グラフを取得しますが、オプションやそのすべてを十分に理解していないので、基本的に何をすべきかを推測しています。 HighChartsサイトの例をサーバーコードからデータを取得してグラフを作成する方法の例として使用しました。違いは私のグラフは例より簡単です。私はフルーツの例のように各ユーザーのためのカテゴリを持っていない、私はユーザーと時間の数だけ記録されています。ここで

はHighCharts jQueryのコードです：

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

そして、ここでJSONを返すアクションメソッドです：

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

私は、円グラフを作成することができたが、今は簡単に作成したいときbar私はjQueryコードの内容を理解することができないので、凡例にリストされている唯一のユーザーのうちの最初のものが配列の最後のものです。第二に、ツールチップには、[ユーザー名]：29の代わりにx = [ユーザーの名前]、y = 29が表示されます。これは円グラフにあります。

このJSonからHighChartsでこのような単純な棒グラフを作成するにはどうすればよいですか？

Answer 1

は、まあ、私は自分自身をそれを働いた後、すべての...私は私のようないくつかの他のHighChartsの初心者が興味を持っている場合には、私はそれを投稿する必要があり考えた：

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

を：

ここで働いていたjQueryの誰かがこの中に障害を見つけ、それを行うには良い方法に私を指すことができれば、私は喜んでそう、私は私自身の答えを受け入れるだろう、答えの信用を渡すよ...

Answer 2

私が使用します。

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

ビュー：

<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> 

だから基本的に私はaddPointを使う（ 'xの配列、Y'、チャートを再描画ではないため偽）