首页 > 代码库 > JQ图表（柱状图 、折线图）
JQ图表（柱状图 、折线图）
1.引用highcharts js文件（http://api.highcharts.com/highcharts#series.xAxis）
2.使用JSON数据
//创建图表 function CreateCharts(jsonData) { var arrayCata = new Array(); //创建一个数组 X轴 var serieData = http://www.mamicode.com/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图表（柱状图 、折线图）