JQ图表（柱状图 、折线图）

标签：

1.引用highcharts js文件（http://api.highcharts.com/highcharts#series.xAxis）

2.使用JSON数据

//创建图表 function CreateCharts(jsonData) {        var arrayCata = new Array();　 //创建一个数组 X轴     var serieData = new Array();   //图形数组

    //生成X轴的字段数组        var arrayXVlaue = new Array(); //生成X轴标题需要的数据列     var arrayXVlaueTemp = new Array();  //临时存放所有值字段     for (var p in jsonData.ClassItems)     {         arrayXVlaueTemp.push(jsonData.ClassItems[p].Value);     }        //arrayXVlaueTemp去重     arrayXVlaueTemp.sort();  //对数组排序     arrayXVlaue.push(arrayXVlaueTemp[0]);//将临时值列表第一项加入 生成X轴标题需要的数据列     for (var i = 1; i < arrayXVlaueTemp.length; i++)     {         if (arrayXVlaueTemp[i] != arrayXVlaue[arrayXVlaue.length - 1])  //数组中不存在         {             arrayXVlaue.push(arrayXVlaueTemp[i]);         }     }       //产生X轴数组     for (var p in jsonData.DataItem)     {         var cata="";           for (var i = 0; i < arrayXVlaue.length; i++)         {             cata = cata + jsonData.DataItem[p][arrayXVlaue[i]];         }         arrayCata.push(cata);     }         //图形数组  根据统计项生成图形     for (var p in jsonData.StatisticItems)     {         var serieItem = {   //初始化serieItem对象             name: ‘‘,             type: ‘‘,                        yAxis: 0,             zIndex: 0,             data: [],         }         var groupName = jsonData.StatisticItems[p].GroupName == null ? "" : jsonData.StatisticItems[p].GroupName;  //分组名         serieItem.name = groupName + jsonData.StatisticItems[p].Name;  //统计项名称         if (jsonData.StatisticItems[p].ChartType == "B")   //柱状图         {             serieItem.type = ‘column‘;   //图形类型                        serieItem.zIndex = 0;        //Z坐标         }         if (jsonData.StatisticItems[p].ChartType == "L")   //折线图         {             serieItem.type = ‘line‘;                       serieItem.zIndex = 1;         }         if (jsonData.StatisticItems[p].ReferY == "L")         {             serieItem.yAxis = 0;         //参照轴         }         if (jsonData.StatisticItems[p].ReferY == "R") {             serieItem.yAxis = 1;         }

        //统计项数据               for (var k in jsonData.DataItem)  //循环数据表，获取统计列的数据存入数组         {             serieItem.data.push(jsonData.DataItem[k][jsonData.StatisticItems[p].Value]);         }

        serieData.push(serieItem);     }

    //创建图表     var chart;     chart = new Highcharts.Chart({         chart: {             renderTo: ‘Div‘ + jsonData.Bm,             marginRight: 60,                              },         title: {             text: jsonData.Name,   //标题             x: -20 //center         },         subtitle: {             text: ‘‘,             x: -20         },         xAxis: {             categories: arrayCata,             labels: {                 style: {                     writingMode: ‘tb-rl‘,   //文字竖排样式                                    },                 align:‘left‘,             },                    },         yAxis: [             {                 title: {                     text: ‘‘                 },                 gridLineWidth: 0,                 minorGridLineWidth: 0,                 minorTickPosition: ‘inside‘,                 minorTickWidth: 1,                 minorTickLength: 5,                 minorTickInterval: ‘auto‘,                 lineWidth: 1,                           },         {             title: {                 text: ‘‘             },             opposite: true,             gridLineWidth: 0,             minorGridLineWidth: 0,             minorTickPosition: ‘inside‘,             minorTickWidth: 1,             minorTickLength: 5,             minorTickInterval: ‘auto‘,             lineWidth: 1,         }         ],         tooltip: {             formatter: function () {                 return ‘<b>‘ + this.series.name + ‘</b><br/>‘ +                 this.x + ‘: ‘ + this.y;             }         },         legend: {             layout: ‘vertical‘,             align: ‘right‘,             verticalAlign: ‘top‘,             x: -85,             y: 20,             borderWidth: 0         },         series: serieData     }); }

3. 数据模型

 #region 图表模型     /// <summary>     /// 图表模型     /// </summary>     public class ChartModel     {         /// <summary>         /// 编码         /// </summary>         public string Bm { get; set; }

        /// <summary>         /// 名称         /// </summary>         public string Name { get; set; }

        /// <summary>         /// 统计项编码         /// </summary>         public string StatisticItemBm { get; set; }

        /// <summary>         /// 统计项列表         /// </summary>         public List<StatisticItem> StatisticItems { get; set; }

        /// <summary>         /// 过滤项编码         /// </summary>         public string FilterItemBm { get; set; }

        /// <summary>         /// 过滤项列表         /// </summary>         public List<FilterItem> FilterItems { get; set; }

        /// <summary>         /// 分类项列表         /// </summary>         public List<ClassItem> ClassItems { get; set; }

        /// <summary>         /// 数据编码（DataTable存储数据）         /// </summary>         public string DataItemBm { get; set; }

        /// <summary>         /// 数据（DataTable存储数据）         /// </summary>         public DataTable DataItem { get; set; }     }     #endregion

    #region 统计项     /// <summary>     /// 统计项     /// </summary>     public class StatisticItem     {         /// <summary>         /// 编号         /// </summary>         public int No { get; set; }

        /// <summary>         /// 统计项的名称         /// </summary>         public string Name { get; set; }

        /// <summary>         /// 统计项的值（即统计的列名）         /// </summary>         public string Value { get; set; }

        /// <summary>         /// 分组名称（Null为没有分组）         /// </summary>         public string GroupName { get; set; }

        /// <summary>         /// 图表类别（B：柱状图；L：折线图）         /// </summary>         public string ChartType { get; set; }

        /// <summary>         /// 参照轴（L：左Y轴；R：右Y轴）         /// </summary>         public string ReferY { get; set; }            }     #endregion

    #region 过滤项     /// <summary>     /// 过滤项     /// </summary>     public class FilterItem     {         /// <summary>         /// 编号         /// </summary>         public int No { get; set; }

        /// <summary>         /// 过滤项名称         /// </summary>         public string Name { get; set; }

        /// <summary>         /// 过滤项字段（字段名）         /// </summary>         public string Value { get; set; }

        /// <summary>         /// 过滤项类型（ComboBox：单选；GridLookup：多选）         /// </summary>         public string Type { get; set; }

        /// <summary>         /// 过滤条件（=：相等；in：包含）         /// </summary>         public string Term { get; set; }

        /// <summary>         /// 默认值         /// </summary>         public string DefaultValue { get; set; }     }     #endregion

    #region 分类项     /// <summary>     /// 分类项     /// </summary>     public class ClassItem     {         /// <summary>         /// 编号         /// </summary>         public int No { get; set; }

        /// <summary>         /// 分类项名称         /// </summary>         public string Name { get; set; }

        /// <summary>         /// 分类项值（分类的字段）         /// </summary>         public string Value { get; set; }

        /// <summary>         /// 统计项编号         /// </summary>         public int StatisticItemNo { get; set; }     }     #endregion

    #region 过滤项值绑定列表模型     /// <summary>     /// 过滤项值绑定列表模型     /// </summary>     public class BindModel     {         /// <summary>         /// 值         /// </summary>         public string BM { get; set; }

        /// <summary>         /// 名称         /// </summary>         public string MC { get; set; }     }     #endregion

JQ图表（柱状图 、折线图）

标签：

原文地址：http://www.cnblogs.com/nygsb2014/p/4198481.html