标签:style class blog code java http
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 = 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: x 37 }, 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: true 51 }, 52 plotOptions: { 53 column: { 54 pointPadding: 0.2, 55 borderWidth: 0 56 } 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: y 62 }] 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 = 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 = 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; }
highCharts 图表统计控件使用方法,布布扣,bubuko.com
标签:style class blog code java http
原文地址:http://www.cnblogs.com/seacher/p/3810535.html