asp.net – jQuery HighCharts和MVC 2应用程序中的简单条形图?
发布时间:2020-12-16 09:21:32 所属栏目:asp.Net 来源:网络整理
导读:我正在尝试使用MVC中的JSon操作方法的结果创建一个非常简单的条形图.我得到了实际的条形图,但我不明白这些选项以及所有这些,所以我基本上猜测该怎么做.我使用HighCharts网站上的示例作为如何从服务器代码获取数据并创建图表的示例.不同之处在于我的图表比示
我正在尝试使用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); }); } 这是返回JSon的action方法: 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,这是我在饼图中得到的. 如何从这个JSon在HighCharts中创建这样一个简单的条形图? 解决方法
我用:
//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,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表示不重绘图表) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 具有多个身份验证过滤器的ASP.net Web API 2控制器
- asp.net-mvc – Razor方法Chaining / Fluent不适用于换行符
- asp.net – 无法在网站上添加”.访问被拒绝(550)
- asp.net-mvc-3 – Apress Pro Asp.net MVC框架3 – SportsS
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装
- asp.net-mvc-3 – 如何在带有剃刀的asp.net mvc3中使用Kend
- asp.net-web-api – SignalR响应覆盖标头
- 认证 – asp.net mvc 3:Page.User.IsInRole(“xy”)返回nu
- asp.net – App Settings和connectionStrings配置设置中连接
- 使用Linq表达式在扩展方法中有趣(?)