首页 > 代码库 > highCharts 图表统计控件使用方法
highCharts 图表统计控件使用方法
1.首先引用js文件
在引用上面文件时,保证已经引用了jquery.js文件。且位置在上面两个文件之前。
2.
1 <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 2 3 <script type="text/javascript"> 5 $.post(‘/Json/JsonSignList/?op=‘ + $("#op").val() + "&date=" + $("#Date").val(), function (data) { 6 var data =http://www.mamicode.com/ data.Content; 7 var x = new Array(); 8 var y = new Array(); 9 for (var i = 0; i < data.length; i++) {10 x[i] = data[i].Id;11 y[i] = data[i].Name;12 }13 show(x,y);14 });15 16 function show(x, y) {17 $(‘#container‘).highcharts({18 chart: {19 type: ‘column‘20 },21 title: {22 text: ‘网报人数直观统计分析图‘23 },24 lang:{ //这个是修改是上面 打印 下载的提升为汉字,如果在highcharts.js里面修改 简直累死25 //exportButtonTitle: ‘导出‘,26 //printButtonTitle: ‘打印‘,27 //exportChart: ‘导出‘,28 printChart: ‘打印‘,29 downloadJPEG:"下载JPEG图片",30 downloadPDF: "下载PDF文档",31 downloadPNG: "下载PNG图片",32 downloadSVG: "下载SVG矢量图"33 },34 xAxis: {35 //categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘, ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]36 categories: x37 },38 yAxis: {39 min: 0,40 title: {41 text: ‘‘42 }43 },44 tooltip: {45 headerFormat: ‘<span style="font-size:10px">{point.key}</span><table>‘,46 pointFormat: ‘<tr><td style="color:{series.color};padding:0">{series.name}: </td>‘ +47 ‘<td style="padding:0"><b>{point.y} </b></td></tr>‘,48 footerFormat: ‘</table>‘,49 shared: true,50 useHTML: true51 },52 plotOptions: {53 column: {54 pointPadding: 0.2,55 borderWidth: 056 }57 },58 series: [{59 name: ‘网报人数‘,60 //data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]61 data: y62 }]63 });64 }65 //}); 66 </script>
3.Json数据方法
//图表统计数据 public ActionResult JsonSignList(int op, string date) { JsonData ret = new JsonData(); NetSignRepository rep = new NetSignRepository(); try { if (op == 1) { ret.Content = rep.CountnetSign(op, date).Select(e => new { Id = e.Date, Name = e.Count }); } else if (op == 2) { ret.Content = rep.CountnetSign(op, date).Select(e => new { Id = e.Hour, Name = e.Count }); } } catch (Exception ex) { ret.Success = false; ret.ErrorMessage = ex.Message; } return Json(ret); } }
public IEnumerable<AnalyseItem> CountnetSign(int op, string date) { IEnumerable<netSign> data =http://www.mamicode.com/ db.netSign; var query = default(IEnumerable<AnalyseItem>); switch (op) { case 1: //按日期分析 query = from p in data group p by new { Date = String.Format("{0:yyyy-MM-dd}", p.Addtime) } into g select new AnalyseItem { Date = g.Key.Date, Count = g.Count() }; break; case 2: //按时段分析 data = http://www.mamicode.com/data.Where(e => String.Format("{0:yyyy-MM-dd}", e.Addtime) == date); query = from p in data group p by new { Hour = String.Format("{0:HH}", p.Addtime) + ":00-" + String.Format("{0:HH}", p.Addtime) + ":59" } into g select new AnalyseItem { Hour = g.Key.Hour, Count = g.Count() }; break; } return query; }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。