MVC折线图应用

后台 获取值并转换成json数据存到实体里面，然后前台输出

HighchartsModels model = new HighchartsModels();
            model.DataDicJson = JSONHelper.ObjectToJSON(YValue);
            model.DataJson = JSONHelper.ObjectToJSON(XDay);

 

对象转json方法：

/// <summary> 
    /// JSON帮助类 
    /// </summary> 
    public class JSONHelper
    {
        /// <summary> 
        /// 对象转JSON 
        /// </summary> 
        /// <param name="obj">对象</param> 
        /// <returns>JSON格式的字符串</returns> 
        public static string ObjectToJSON(object obj)
        {
            JavaScriptSerializer jss = new JavaScriptSerializer();
            try
            {
                return jss.Serialize(obj);
            }
            catch (Exception ex)
            {
                throw new Exception("JSONHelper.ObjectToJSON(): " + ex.Message);
            }
        }
}

 

折线图数据内容实体：

  public class HighchartsModels
    {
        [Display(Name = "报表标题")]
        public List<string> Title { get; set; }

        [Display(Name = "json对象:报表标题")]
        public string TitleJson { get; set; }

        [Display(Name = "内容数据")]
        public List<int> Data { get; set; }

        [Display(Name = "json对象:内容数据")]
        public string DataJson { get; set; }

        [Display(Name = "内容数据[dic]")]
        public Dictionary<string, int> DataDic { get; set; }

        [Display(Name = "json对象:内容数据[dic]")]
        public string DataDicJson { get; set; }

        
    }

前台：

<script src="~/Scripts/Highcharts-3.0.10/js/highcharts.js"></script>//布局显示折线图js
<script src="~/Scripts/Highcharts-3.0.10/js/modules/exporting.js"></script>//导出功能js

<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: '考勤情况曲线图',
x: -20 //center
},

xAxis: {
categories: @Html.Raw(hidModel.DataJson) //X轴列  json数据 赋值之前转json
},
yAxis: {
title: {
text: '考勤率 (%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '%'
},
legend: {

//X轴名称显示右侧

//layout: 'vertical',    
//align: 'right',
//verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: '考勤率',
data: @Html.Raw(hidModel.DataDicJson)  //Y轴值  json数据 赋值之前转json
}]
});
});
</script>

//hidModel 自定义对象

<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto">

</div>

 

资料地址：http://www.hcharts.cn/