首页 > 代码库 > 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;        }