zoukankan      html  css  js  c++  java
  • 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,
     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- 300px; height: 400px; margin: 0 auto">
    
    </div>

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

  • 相关阅读:
    表达式计算 java 后缀表达式
    动态规划略有所得 数字三角形(POJ1163)
    SharedPreferences的基本数据写入和读取
    安卓 io流 写入文件,再读取的基本使用
    SqLite的基本使用
    安卓手机开机开启指定Activity
    Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK fla
    广播的基本使用,判断是否有可用网络,并弹出设置窗口
    AsyncTask下载网络图片的简单应用
    Intellij_idea-14官方快捷键中文版
  • 原文地址:https://www.cnblogs.com/wt-vip/p/5750150.html
Copyright © 2011-2022 走看看