MVC3下从后台获取json数据使用highcharts绘制图表

1.  需要引用两个js文件<script src="@Url.Content("~/Content/Scripts/highcharts.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Content/Scripts/exporting.js")" type="text/javascript"></script>用于导出打印图表

2.    后台获取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);
        }

3.   前台绘制图表，先post到数据

$.post('/Json/JsonSignList/?op=' + $("#op").val() + "&date=" + $("#Date").val(), function (data) {
        var data = data.Content;
        var x = new Array();
        var y = new Array();
        for (var i = 0; i < data.length; i++) {
            x[i] = data[i].Id;
            y[i] = data[i].Name;
        }
        show(x,y);
    });

再传递x轴和y轴数据绘制图表

function show(x, y) {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '网报人数直观统计分析图'
            },
            lang:{  //这个是修改是上面 打印 下载的提升为汉字，如果在highcharts.js里面修改 简直累死
                //exportButtonTitle: '导出',
                //printButtonTitle: '打印',
                //exportChart: '导出',
                printChart: '打印',
                downloadJPEG:"下载JPEG图片",
                downloadPDF: "下载PDF文档",
                downloadPNG: "下载PNG图片",
                downloadSVG: "下载SVG矢量图"
            },
            xAxis: {
                categories: x
            },
            yAxis: {
                min: 0,
                title: {
                    text: ''
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y} </b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: '网报人数',
                data: y
            }]
        });
    }

5. 效果图如下：