Массив не в правильном формате в Javascript для использования HighChart - PullRequest
0 голосов
/ 25 июля 2011

Привет, я передаю объект List из моего контроллера в Javascript, где он помещается обратно в массив и используется в качестве источника данных для гистограммы HighChart.

В моем коде ниже, если я прокомментирую в необработанных данных, он работает. Если я использую переменную массива с именем 'result', я ничего не получу

Если я войду в Javascript с помощью отладчика и выведу результат в непосредственное окно, оно будет выглядеть так:

? Результат [0] {...} [0]: "2" [1]: {...}

? Результат [0] [1] {...} [0]: 0 [1]: 0 [2]: 0 [3]: 0 [4]: 0 [5]: 0 [6]: 1 [7]: 0 [8]: 0 [9]: 0 [10]: 0 [11]: 0

ЗДЕСЬ КОД:

function CreateChart3(surl) {

    // Code block for fetching Array as jsonResult (js)
    var url = $("#AbsolutePath").val() + "Complaint.mvc/GetChartData_MonthlyByType/" + surl;

    var chart;

    $.getJSON(url, null, function(data) {

        var result = [];
        jQuery.each(data, function(i, val) {
            result[i] = [val.Type, val.Count];
        });

        //            var seriesData = [];
        //            for (var i = 0; i < result.length; i++) {
        //                seriesData.push({ data: result[i][1] ,name: result[i][0]});
        //            }

        debugger;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart3',
                defaultSeriesType: 'column',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Stacked Bar Monthly By Type'
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total No Of Complaints'
                },
                xAxis: {
                    categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
                    title: 'Month'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Total: ' + this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
            //                            series:
            //                                 [{
            //                                    name: "2",
            //                                    data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0]
            //                                        }, {
            //                                    name: "3",
            //                                    data: [1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 3, 0]

            //                                    }]
            series: [{
                data: result
                }]
            });
        });
    };

ВЫДЕРЖКА ИЗ КОДА КОНТРОЛЛЕРА, ЕСЛИ ЭТО ПОМОГАЕТ ......

         var qry = from i in _db.Complaints
                  where i.Site.SiteDescription.Contains(searchTextSite)
                       && (i.Raised >= startDate && i.Raised <= endDate)
                  group i by i.ComplaintNatureTypeId.ToString()
                      into grp
                      select new
                          {
                              Type = grp.Key,
                              Count = new int[] { 
                                  grp.Where(c => c.Raised.Month == 1).Count(),
                                      grp.Where(c => c.Raised.Month == 2).Count(),
                                      grp.Where(c => c.Raised.Month == 3).Count(),
                                      grp.Where(c => c.Raised.Month == 4).Count(),
                                      grp.Where(c => c.Raised.Month == 5).Count(),
                                      grp.Where(c => c.Raised.Month == 6).Count(),
                                      grp.Where(c => c.Raised.Month == 7).Count(),
                                      grp.Where(c => c.Raised.Month == 8).Count(),
                                      grp.Where(c => c.Raised.Month == 9).Count() ,
                                      grp.Where(c => c.Raised.Month == 10).Count() ,
                                      grp.Where(c => c.Raised.Month == 11).Count(),
                                      grp.Where(c => c.Raised.Month == 12).Count() }

                          };


        return Json(qry.ToArray(), JsonRequestBehavior.AllowGet);

Ответы [ 2 ]

1 голос
/ 26 июля 2011

Как я помню, data свойство series - это массив

  1. значений y
  2. пара значений xy
  3. точечных объектов

Как я понимаю, каждый элемент вашего массива является массивом, где element [0] равен name, а element [1] является массивом y-значений.Итак, у вас есть несколько серий.Вы должны вручную преобразовать полученный результат в массив { name: ..., data: ...} объектов и передать его конструктору HighCharts.Используйте for цикл:

var seriesData = [];
for (var i = 0; i < result.length; i++){
    seriesData.push({ name: result[i][0], data: result[i][1] });
}

И используйте данные серии как:

series: seriesData
0 голосов
/ 25 июля 2011

Глядя на выходные данные отладчика, JSON не соответствует ожиданиям.

Трудно сказать точно, но возвращаете ли вы правильный объект из контроллера? Похоже, вы возвращаете qry, когда вы должны использовать grp.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...