Asp.net jQuery HighCharts和MVC2应用程序中的简单条形图？

我正在尝试使用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);
                        });                        
        }

函数getHighChart（）{ var actionUrl=''； var customerId=$（'#customersId'）.val（）； var startdate=$（'.date pickStart'）.val（）； var enddate=$（'.date pickEnd'）.val（）； 变量选项={ 图表：{ renderTo:'图表容器'， defaultSeriesType:'bar' }, 标题：{ 文本：“Statistik” }, xAxis：{ 类别：[] }, 亚克斯：{ 标题：{ 文本：“蒂玛” } }, 系列：[] } getJSON（actionUrl， {customerId:customerId，startdate:startdate，enddate:enddate}，函数（项）{ 变量系列={ 数据：[] }; $。每个（项目，功能（项目编号，项目）{ series.name=item.Key； series.data.push（parseFloat（item.Value））； }); 选项。系列。推送（系列）； var图表=新的Highcharts.图表（选项）； }); } 下面是返回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);
    }

公共JsonResult GetChartData（字符串customerId、字符串startdate、字符串enddate） { int intcustomerId=Int32.Parse（customerId）； var emps=来自_repository.TimeSegments中的段 哪里 segment.Date.Date>=DateTime.Parse（startdate）&& 段。日期。日期（秒） }; Dictionary retVal=新字典（）； foreach（风险值emps中的currentEmployee） { retVal.Add（currentEmployee.Name，currentEmployee.CurrentMonthHours）； } 返回Json（retVal.ToArray（），JsonRequestBehavior.AllowGet）； } 我可以创建一个饼图，但现在当我想要创建一个简单的条形图时，我无法计算jQuery代码中的内容，因此我得到的结果是一个条形图，其中图例中列出的第一个用户是数组中的最后一个用户。其次，工具提示显示x=[用户名]，y=29，而不是我在饼图中看到的[用户名]：29

---

我如何用这个JSon在HighCharts中创建这样一个简单的条形图呢？

好吧，毕竟是我自己设计的。。。我想我应该把它贴出来，以防像我这样的海图新手感兴趣：

以下是有效的jQuery：

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

函数getHighChart（）{ var actionUrl=''； var customerId=$（'#customersId'）.val（）； var customerName=$（'#customerId选项：选中'）。text（）； var startdate=$（'.date pickStart'）.val（）； var enddate=$（'.date pickEnd'）.val（）； //定义选项 变量选项={ 图表：{ renderTo:'图表容器'， defaultSeriesType:“列” }, 标题：{ 文本：“为“+客户名称工作的小时数” }, xAxis：{ 类别：[客户名称] }, 亚克斯：{ 标题：{ 文字：“小时” } }, 系列：[] }; //调用JSON操作方法 getJSON（actionUrl， {customerId:customerId，startdate:startdate，enddate:enddate}，函数（项）{ $。每个（项目，功能（项目编号，项目）{ 变量系列={ 数据：[] }; series.name=item.Key； series.data.push（parseFloat（item.Value））； 选项。系列。推送（系列）； }); var图表=新的Highcharts.图表（选项）； }); } 如果有人能找到这方面的缺点并指出更好的方法，我会很乐意交出答案，否则我会接受我自己的答案…

我使用：

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

//控制器操作：
公共JsonResult GetData（int id）
{
Dictionary data=this.repository.GetData（id）；
返回Json（data.ToArray（），JsonRequestBehavior.AllowGet）；
}

视图：

var-chart1；
$（文档）.ready（函数（）{
图表1=新的高点图表。图表({
图表：{
renderTo:'chart-container-1'，
defaultSeriesType:“散布”，
活动：{
加载：请求数据
}
},           
选项。。。
,
系列：[{
名称：'一些数据'，
数据：[]
}]
});
}
);
函数requestData（）{
$.ajax({
url:“/ControllerName/GetData？id=@（Model.id）”，
成功：功能（项目）{
$。每个（项目，功能（项目编号，项目）{
chart1.series[0].addPoint（[item.Key，item.Value]，false）；
});    
图1.重画（）；
},
缓存：false
});
}    

如此基本

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