Простая столбчатая диаграмма в приложении jQuery HighCharts и MVC 2?

Question

Я пытаюсь создать очень простую столбчатую диаграмму, используя результаты метода действия JSon в MVC.Я получаю фактическую гистограмму, но я недостаточно хорошо понимаю параметры и все такое прочее, поэтому в основном догадываюсь, что делать.Я использовал пример на сайте 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);
                        });                        
        }

И вот метод action, возвращающий 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, поэтому в результате я получаю панель, где, во-первых, единственный пользователь, указанный в легенде, является последним в массиве.Во-вторых, во всплывающей подсказке отображается x = [Имя пользователя], y = 29, вместо [Имени пользователя]:29, который я получил на круговой диаграмме.

Как бы я мог создать такую простую столбчатую диаграмму в HighCharts из этого JSon?

Answer 1

Что ж, в конце концов, я сам до этого додумался...Я подумал, что должен опубликовать это на случай, если заинтересуется какой-нибудь другой новичок в 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);
                    });
    }

Если кто-то сможет найти в этом ошибки и указать мне на лучший способ сделать это, я с радостью предоставлю ответ, в противном случае я приму свой собственный ответ...

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', false, чтобы не перерисовывать диаграмму)