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 = 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 图表统计控件使用方法