jQuery中HighCharts和MVC 2应用简单条形图？ [英] Simple bar chart in jQuery HighCharts and MVC 2 application?

问题描述

我试图创建一个使用MVC中的一个JSON操作方法的结果，一个很简单的柱状图。我得到的实际柱状图，但我不明白的选项和所有的不够好，所以我基本上猜测做什么。我曾经在HighCharts网站作为如何从服务器code数据和创建图表的例子的例子。所不同的是我的图表比例简单。我没有为每个用户类别（如在水果的例子），我只有一个用户和若干小时记录

I'm trying to create a very simple bar chart using the results of a JSon action method in MVC. I get the actual bar chart, but I don't understand the options and all that well enough, so I'm basically guessing what to do. I used the example on the HighCharts site as an example for how to get data from server code and create a chart. The difference is my chart is simpler than the example. I don't have categories for each user (as in the fruit example), I only have a user and a number of hours logged.

这里的HighCharts jQuery的code：

Here's the 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);
                        });                        
        }

和这里的操作方法返回JSON：

And here's the action method returning 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);
    }

我能够创建一个饼图，但现在当我想创建一个简单的吧，我没能制定出什么是什么在jQuery的code，所以我得到的结果是一个酒吧，首先在图例中列出的唯一用户的是阵列中的最后一个。其次，工具提示显示X = [用户名]，Y = 29，而不是[用户名]：29，这是我饼图中得到了

I was able to create a pie chart, but now when I want to create a simple bar I'm not able to work out what is what in the jQuery code, so the results I get is a bar where first of all the only user listed in the legend is the last one in the array. Secondly, the tooltip shows x = [The user's name], y = 29, instead of [The user's name]: 29, which I got in the pie chart.

我将如何创造这样的HighCharts简单的条形图从这个JSON？

How would I create such a simple bar chart in HighCharts from this JSon?

推荐答案

好吧，我算出来自己毕竟...我想我应该张贴在这情况下，其他一些HighCharts新手跟我一样有兴趣：

Well, I worked it out myself after all... I thought I should post it in case some other HighCharts newbie like me is interested:

下面是工作的jQuery的：

Here's the jQuery that worked:

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

如果有人能在这找到故障并指向我一个更好的方式来做到这一点，我会很乐意交出的答案信贷，否则我会接受我自己的答案......

If someone can find faults in this and point me to a better way to do it, I'll gladly hand over the answer credit, otherwise I'll accept my own answer...

这篇关于jQuery中HighCharts和MVC 2应用简单条形图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！