在ASP.NET MVC中解析Morris图表的数据

时间:2018-06-01 15:58:28

标签: javascript .net json asp.net-mvc morris.js

我正在开发应用程序的一部分,我需要生成一些用户运动员的报告并预览下面的图表:

某些升降机的日期和曝光次数

这是html和javascript:

                    <div class="chart" id="bar-chart-@exposureReport.AthleteId" style="height: 300px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                        <script>
                            drawChart('@exposureReport.CoachId', '@exposureReport.AthleteId');

                            function drawChart(coachId, athleteId) {
                                //debugger;
                                $.getJSON('@Url.Action("FetchAthleteChartData", "Reports")?coachId=' + coachId + '&athleteId=' + athleteId,
                                    function (data) {
                                        var datax = JSON.stringify(data);
                                        alert(datax);
                                        Morris.Bar({
                                            element: 'bar-chart-' + athleteId,
                                            resize: true,
                                            barSizeRatio: 0.12,
                                            barGap: 3,
                                            data: $.parseJSON(datax),
                                            barColors: ['#ff0000'],
                                            xkey: ['exposures'],
                                            ykeys: ['dates'],
                                            labels: ['Times exposed'],
                                            hideHover: 'auto'
                                        });
                                    }
                                );
                            }
                        </script>
                    </div>

我预览了当前视图中的所有报告并预览它们。我想为每份报告显示一个图表。

我调用javascript函数并传递coachId和athleteId值,让服务器为我取数据:

 [HttpGet]
    public JsonResult FetchAthleteChartData(string coachId, string athleteId)
    {
        var exerciseReport =
            _applicationUserOperations.GetAllExposureReportsForCoachByAthleteId(coachId, athleteId);

        var filteredDates = exerciseReport.Exposures.Select(x => x.ExposureDate).ToList();
        var filteredExposures = exerciseReport.Exposures.Select(x => x.NumberOfLifts).ToList();

        var result = new
        {
            Dates = filteredDates,
            Exposures = filteredExposures
        };


        return Json(result);
    }

当我的警报(datax)触发它时(我只有一个训练/运动/电梯入口atm):

{"dates":["2018-06-01T00:00:00"],"exposures":[5]}

这是正确的解析格式吗?如何解析它,以便图表数据可以理解并显示它。

0 个答案:

没有答案